jquery.slimScroll插件 div添加滚动条
来源:互联网 发布:html中的input调用js 编辑:程序博客网 时间:2024/06/05 11:12
项目中左侧菜单栏中子菜单展开时长度过长,导致页面撑开。使用该插件为菜单栏的div加上滚动条
github地址:https://github.com/kujian/jQuery-slimScroll?utm_source=caibaojian.com
simScroll插件项目下载地址:https://github.com/rochal/jQuery-slimScroll
TIP:不支持横向滚动条
1.slimScroll在使用的时候要依赖JQ,所以首次使用的时候要引入JQ再引入simScroll插件
2.不支持resize的时候重新调用插件,不过有人已经修改过源码,这是修改过的版本的下载地址:https://github.com/kujian/jQuery-slimScroll
resize重新调用插件增加的代码部分:
1 2 3 4 5 6 7 8 9 10
slimScroll事件——当滚动条达到父容器的顶部或底部触发事件:
1 2 3
来自CODE的代码片
使用时引入jquery和插件
<script src="${base}js/jquery-1.10.2.js"></script>
<script src="${base}js/jquery.slimscroll.min.js"></script>
给需要滚动栏的div绑定,需在dom树加载完之后
<script type = "text/javascript">
$(function(){
$(".sidebar-collapse").slimScroll({
height: '100%',
alwaysVisible: false,
});
})
</script>
常用参数:
width:'100px',//容器宽度,默认无
height:'100px',//容器高度,默认250px
size:'10px',//滚动条宽度,默认7px
position:'left',//滚动条位置,可选值:left,right,默认right
color:'#abc',//滚动条颜色,默认#000000
alwaysVisible:true,//是否禁用隐藏滚动条,默认false
distance:'10px,'//距离边框距离,位置由position参数决定,默认1px
start:'.p',//滚动条初始位置,可选值top,bottom,$(selector)--内容元素位置,默认top
wheelStep:'12px',滚动条滚动值,默认10px
railVisible:true,//滚动条背景轨迹,默认false
railColor:'#005612',//滚动条背景轨迹颜色,默认#333333
railOpacity:0.8,//滚动条背景轨迹透明度,默认0.2
allowPageScroll:true,//滚动条滚动到顶部或底部时是否允许页面滚动,默认false
scrollTo:'50px',//跳转到指定的滚动值。可以呼吁任何元素slimScroll已经启用了吗(没试过)
scrollBy:'50px'增加/减少当前滚动值由指定的数量(正面或负面)。可以呼吁任何元素slimScroll已经启用(没试过)
disableFadeOut:true,//是否禁用鼠标在内容处一定时间不动隐藏滚动条,当设置alwaysVisible为true时该参数无效,默认false
touchScrollStep:1000,//可以设置不同的触摸滚动事件的敏感性。负数反转方向滚动,默认200
- jquery.slimScroll插件 div添加滚动条
- jquery.slimScroll插件 div添加滚动条
- jquery滚动条插件slimScroll
- 一个很好的滚动条插件jquery.slimscroll.js
- jquery滚动条插件slimScroll的使用方法总结
- jquery滚动条插件slimScroll的使用方法总结
- jquery滚动条插件slimScroll的使用方法总结
- 插件--滚动插件slimScroll
- div添加滚动条
- div 添加滚动条
- div 添加滚动条
- DIV添加滚动条
- 给div添加滚动条
- 给DIV添加滚动条
- 给DIV添加滚动条
- DIV中添加滚动条
- jQuery库 之 jquery slimscroll插件使用
- jquery插件封装:滚动条
- 面向对象设计的八大原则
- ubuntu 会检测ip packet的源IP是否可达
- LVM条带化
- 线程与线程间通信
- “一切都是消息”--MSF(消息服务框架)之【发布-订阅】模式
- jquery.slimScroll插件 div添加滚动条
- 使用OPENcsv处理csv文件
- 对象、类型和值-1
- 常见HTTPError对应相应的状态码
- Xcode9 不使用数据线真机调试
- mongodb介绍
- shell 编程基础
- Oracle 数据库 升级前 必要的准备工作
- shell讲课:一