滚动条插件slimScroll.js

WEB前端 JS插件 2015年9月1日

slimscroll.js是一个非常小巧的jQuery滚动条插件，jQuery slimScroll.js插件使用起来也很简便，给盒子固定一个高度，超出的则会自动出现滚动条。slimscroll.js不占用任何的视觉空间，因为它只有当用户鼠标移过去时才会出现，用户可以拖动滚动条或使用鼠标滚轮来改变滚动条的位置。slimscroll.js可以自定义的参数也非常的丰富，支持滚动条颜色，宽度，位置，大小，是否显示等属性。

1、引入jquery.js、jquery.slimscroll.min.js文件
[cc lang=”javascript” escaped=”true”]<script type=”text/javascript” src=”./js/jquery.min.js”></script>
<script type=”text/javascript” src=”./js/jquery.slimscroll.min.js”></script>[/cc]

2、HTML代码如下:
[cc lang=”html” escaped=”true”]<div class=”wrap”>
<div id=”inner-content”>
PHP程序员，雷雪松的个人博客–www.xuesongboke.cn
</div>
</div>[/cc]

3、$(‘#inner-content’)调用slimScroll()方法
[cc lang=”javascript” escaped=”true”]$(function(){
$(‘#inner-content’).slimScroll({
height: ‘250px’
});
});[/cc]

slimScroll.js参数：
[cc lang=”javascript” escaped=”true”]$(function() {
$(“.slimscroll”).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’ //轨道圆角
});
});[/cc]

来源：滚动条插件slimScroll.js