html - 需要在 Bootstrap DropDownList 的 Ul 上进行 Slim Scroll

Question

我想自定义 Bootstrap 下拉菜单。 我的 DropDown 有很多记录。我想在 bootstrap 下拉列表的 ul 部分添加 slim scroll。

请参阅以下链接 -

_http://jsfiddle.net/saurabh29/pgrdm7jt/2/

请帮忙....

提前致谢。

Answer 1

这里是bootstrap下拉自定义滚动条选项。 看这个fiddle供大家引用。

谢谢

   <div class="btn-group">
   <div >
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Scrollable Menu <span class="caret"></span></button>
            <ul class="dropdown-menu scrollable-menu scrollbar" role="menu" id="ex4" >
                <li><a href="#">Drop1</a></li>
                <li><a href="#">Drop2</a></li>
                <li><a href="#">Drop3</a></li>
                <li><a href="#">Drop4</a></li>
                <li><a href="#">Drop5</a></li>
                <li><a href="#">Drop6</a></li>
                <li><a href="#">Drop7</a></li>
                <li><a href="#">Drop8</a></li>
                <li><a href="#">Drop9</a></li>
                <li><a href="#">Drop10</a></li>
                <li><a href="#">Drop11</a></li>
                <li><a href="#">Drop12</a></li>
                <li><a href="#">Drop13</a></li>
                <li><a href="#">Drop14</a></li>
            </ul>
            </div>
     </div>

这里是 css:-

 .scrollbar{ 
    background-color:lightgray;height: auto;
    max-height: 200px;
    overflow-x:hidden;
    overflow-y:scroll; 
    min-width: 135px;
    margin-top: 0px; 
   }
  #ex4::-webkit-scrollbar { width:10px;background-color:#cccccc; } 
  #ex4::-webkit-scrollbar-thumb { background-color:#B03C3F;border-radius:10px; }
  #ex4::-webkit-scrollbar-thumb:hover { background-color:#BF4649;border:1px solid #333333; }
  #ex4::-webkit-scrollbar-thumb:active { background-color:#A6393D;border:1px solid #333333; }