jquery滚动条插件slimScroll

时间 2019-11-13
标签 jquery 滚动条插件 slimscroll 栏目 JQuery 繁體版
原文原文链接
参数html
width: 'auto', //可滚动区域宽度jquery
 
          
 height:  
 '100%' 
 ,  
 //可滚动区域高度 
 
          
 size:  
 '10px' 
 ,  
 //组件宽度 
 
          
 color:  
 '#000' 
 ,  
 //滚动条颜色 
 
          
 position:  
 'right' 
 ,  
 //组件位置：left/right 
 
          
 distance:  
 '0px' 
 ,  
 //组件与侧边之间的距离 
 
          
 start:  
 'top' 
 ,  
 //默认滚动位置：top/bottom 
 
          
 opacity: .4,  
 //滚动条透明度 
 
          
 alwaysVisible:  
 true 
 ,  
 //是否 始终显示组件 
 
          
 disableFadeOut:  
 false 
 ,  
 //是否 鼠标通过可滚动区域时显示组件，离开时隐藏组件 
 
          
 railVisible:  
 true 
 ,  
 //是否 显示轨道 
 
          
 railColor:  
 '#333' 
 ,  
 //轨道颜色 
 
          
 railOpacity: .2,  
 //轨道透明度 
 
          
 railDraggable:  
 true 
 ,  
 //是否 滚动条可拖动 
 
          
 railClass:  
 'slimScrollRail' 
 ,  
 //轨道div类名  
 
          
 barClass:  
 'slimScrollBar' 
 ,  
 //滚动条div类名 
 
          
 wrapperClass:  
 'slimScrollDiv' 
 ,  
 //外包div类名 
 
          
 allowPageScroll:  
 true 
 ,  
 //是否 使用滚轮到达顶端/底端时，滚动窗口 
 
          
 wheelStep: 20,  
 //滚轮滚动量 
 
          
 touchScrollStep: 200,  
 //滚动量当用户使用手势 
 
          
 borderRadius:  
 '7px' 
 ,  
 //滚动条圆角 
 
          
 railBorderRadius:  
 '7px'  
 //轨道圆角 

    

  DEMO 

    
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="jquery-1.11.3.min.js"></script>
 <script src="jquery.slimscroll.min.js"></script>
 <style>
 .demo{
 max-height: 200px;
 width: 100px;
 border: 1px solid #008080;
 margin:0px auto;
 margin-top: 50px;
 /*overflow: hidden;*/
 }
 .li{
 list-style: none;
 height: 50px;
 width: 80px;
 margin: 10px auto;
 }
 .bg-006600{
 background: #006600;
 }
 .bg-006633{
 background: #006633;
 }
 .bg-006666{
 background: #006666;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <div id="demo">
 <ul style="margin: 0;padding: 0;">
 <li class="li bg-006600"></li>
 <li class="li bg-006633"></li>
 <li class="li bg-006666"></li>
 <li class="li bg-006600"></li>
 <li class="li bg-006633"></li>
 <li class="li bg-006666"></li>
 <li class="li bg-006600"></li>
 <li class="li bg-006633"></li>
 <li class="li bg-006666"></li>
 </ul>
 </div>
 </div>
 <script>
 function setScroll(){
 $("#demo").slimScroll({
 width: 'auto',
 height: 'auto',
 start: 'bottom', //默认滚动位置：top/bottom
 borderRadius: '0px', //滚动条圆角
 railBorderRadius: '0px',//轨道圆角
 disableFadeOut: false, //是否 鼠标通过可滚动区域时显示组件，离开时隐藏组件
 alwaysVisible: true, //是否 始终显示组件
 });
 }
 setScroll();
 //$(window).on("resize",setScroll);
 </script>
 </body>
</html>app