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

1、引入jquery.js、jquery.slimscroll.min.js文件

1 2	<script type=“text/javascript” src=“./js/jquery.min.js”></script> <script type=“text/javascript” src=“./js/jquery.slimscroll.min.js”></script>

2、HTML代码如下:

1
2
3
4
5

<div class=“wrap”>
<div id=“inner-content”>
PHP程序员，雷雪松的个人博客–www.leixuesong.cn
</div>
</div>

3、$(‘#inner-content’)调用slimScroll()方法

1
2
3
4
5

$(function(){
$(‘#inner-content’).slimScroll({
height: ‘250px’
});
});

slimScroll.js参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$(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’ //轨道圆角
});
});

未经允许不得转载：Bcoder资源网 » 滚动条插件slimScroll.js