本文实例为大家总结了滚动条插件slimScroll的使用方法,供大家参考,具体内容如下
simScroll插件项目下载地址:https://github.com/rochal/jQuery-slimScroll
<强>提示:
1。slimScroll在使用的时候要依赖金桥,所以首次使用的时候要引入金桥再引入simScroll插件
2 .不支持调整的时候重新调用插件,不过有人已经修改过源码,这是修改过的版本的下载地址:https://github.com/kujian/jQuery-slimScroll
调整重新调用插件增加的代码部分:
函数setScroll () {
$ (" .box-list ") .slimScroll ({
高度:boxHeight,
alwaysVisible:没错,
});
}
setScroll ();
$(窗口)。(“调整”,setScroll);
之前
插件的调用以及参数设置:
$(函数(){
$ (" .slimscroll ") .slimscroll ({
宽度:'汽车',//可滚动区域宽度
高度:“100%”,//可滚动区域高度
大小:10 px,//组件宽度
颜色:# 000,//滚动条颜色
位置:“正确”的,//组件位置:左/右
距离:“0 px ',//组件与侧边之间的距离
开始:‘前’,//默认滚动位置:顶部/底部
透明度:。4,//滚动条透明度
alwaysVisible:真的,//是否始终显示组件
disableFadeOut:假的,//是否鼠标经过可滚动区域时显示组件,离开时隐藏组件
railVisible:真的,//是否显示轨道
railColor: # 333,//轨道颜色
railOpacity:。2,//轨道透明度
railDraggable:真的,//是否滚动条可拖动
railClass:“slimScrollRail ',//轨道div类名
barClass:“slimScrollBar ',//滚动条div类名
wrapperClass:“slimScrollDiv ',//外包div类名
allowPageScroll:真的,//是否使用滚轮到达顶端/底端时,滚动窗口//wheelStep: 20日滚轮滚动量
touchScrollStep: 200//滚动量当用户使用手势
borderRadius: 7 px,//滚动条圆角
railBorderRadius:“7 px”//轨道圆角
});
});
之前
slimScroll事件,当滚动条达到父容器的顶部或底部触发事件:
$(选择).slimScroll ()。绑定(slimscroll,函数(e, pos) {
控制台。日志(“达到”+ pos”);
});
之前
完整例子:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> slimScroll插件使用例子& lt;/title>
& lt;/head>
& lt; body>
& lt; div类=皊uperDiv”比;
& lt; div id=癷nnerDiv”比;
& lt; p> xxxxxxxxxxxxxx
& lt;/div>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/jquery.slimscroll.js "祝辞& lt;/script>
& lt; script>
$(函数(){
$ (' # innerDiv ') .slimScroll ({
身高:250 px的
});
$ (' # innerDiv ') .slimScroll ()。绑定(slimscroll,函数(e, pos) {
如果(pos==暗撞俊?{//执行其他逻辑
}
});
});
& lt;/script>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
