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>

在打开select标记后添加scrollbar1 id，但不起作用。当通过Firebug检查任何错误时，找不到。我怎样才能在我的结构上使用这个插件？

Answer 1

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




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

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

1 个答案: