下拉菜单上的自定义滚动条

Question

我有一个HTML下拉结构。带有以下内容：

 <div class="tl_l">
<div class="labeled"><label for="pers_il">İl</label></div>
<select id="ad_il" name="pers_il" class="">
<option>İstanbul</option>
<option>Ankara</option>
<option>Adana</option>
<option>Adıyaman</option>
<option>Aydın</option>
<option>Muğla</option>
<option>Eskişehir</option>
<option>Konya</option>
<option>Denizli</option>
<option>Bitlis</option>
<option>Yozgat</option>
<option>Antalya</option>
<option>Muğla</option>
</select>
</div>

并使用JGD下拉jquery插件进行自定义下拉。但是我的单子太长了。所以，我想在这个列表中添加自定义的scollbar。安装了小滚动条并添加我的HTML。CSS：

#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #003D5D; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

JS:

<script type="text/javascript">
    $(document).ready(function(){
        $('#scrollbar1').tinyscrollbar();
    });
</script>

并在打开select标签后添加滚动条1 id，但不起作用。当通过Firebug检查任何错误时，未找到。我如何在我的结构上使用这个插件？

Answer 1

要启用浏览器的内置滚动条，请确保指定容器的高度和溢出

#scrollbar1 { 
  width: 520px; 
  clear: both; 
  margin: 20px 0 10px;
  height: 400px;
  overflow-y: auto;
}