Пользовательская полоса прокрутки в выпадающем меню

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 идентификатор после открытия select тега, но не работает. При проверке любого erros через Firebug не найден. Как я могу использовать этот плагин в своей структуре?

Answer 1

для того, чтобы ваш браузер встроенный в скроллинга, убедитесь, что вы указываете и высоту контейнера и переполнение

 

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