드롭 다운 메뉴의 사용자 정의 스크롤바

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 플러그인 : 다음으로. 하지만 내 목록이 너무 길어. 그래서,이 목록에 사용자 정의 스크롤바를 추가하고 싶습니다. 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> 

그리고 select 태그를 연 후 scrollbar1 ID를 추가하지만 작동하지 않습니다. Firebug를 통해 erros를 선택하면 찾을 수 없습니다. 내 구조에서이 플러그인을 어떻게 사용할 수 있습니까?

Answer 1

사용하려면 브라우저의 스크롤바에 내장, 당신은 컨테이너의 높이와 오버 플로우를 모두 지정해야

 

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