您的位置:首页 > Web前端 > JQuery

jquery.slimScroll插件 div添加滚动条

2016-09-07 11:13 260 查看
项目中左侧菜单栏中子菜单展开时长度过长,导致页面撑开。使用该插件为菜单栏的div加上滚动条

github地址:https://github.com/kujian/jQuery-slimScroll?utm_source=caibaojian.com

使用时引入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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息