滚动条插件slimScroll.js

WEB前端

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

来源:滚动条插件slimScroll.js

发表评论

电子邮件地址不会被公开。 必填项已用*标注