jquery滚动条插件slimScroll

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

参数

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>