jquery滚动条插件slimScroll

最新推荐文章于 2024-03-14 11:54:17 发布

weixin_34128237

最新推荐文章于 2024-03-14 11:54:17 发布

阅读量114

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chongtao/p/6548093.html

版权

参数
width: 'auto', //可滚动区域宽度
 
           
  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>

转载于:https://www.cnblogs.com/chongtao/p/6548093.html

weixin_34128237

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery滚动条插件slimScroll

参数width:'auto',//可滚动区域宽度height:'100%',//可滚动区域高度size:'10px',//组件宽度color:'#000',//滚动条颜色position:'right',//组件位置：left/rightdistance:'0px',//...
复制链接

扫一扫