下拉菜單上的自定義滾動條

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 Dropdown jQuery插件我的自定義下拉。但是我的名單太長了。所以，我想在此列表中添加自定義的scollbar。安裝Tiny Scrollbar並添加我的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> 

並添加scrollbar1 ID打開select標籤之後，但不起作用。當通過Firebug檢查任何錯誤時，找不到。我如何在我的結構上使用這個插件？

Answer 1

啓用瀏覽器的內置滾動條，確保您指定的容器的高度和溢出

 

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