jQuery自定义滚动条插件Nicescroll.js

所属分类:UI-滚动

 33533  356  查看评论 (18)
分享到微信朋友圈
X
jQuery自定义滚动条插件Nicescroll.js ie兼容8
$('#boxscroll').niceScroll({
    cursorcolor: "#dcdee0", //滚动条的颜色   
    cursoropacitymax: 1, //滚动条的透明度,从0-1   
    touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备   
    cursorwidth: "8px", //滚动条的宽度   
    cursorborder: "0", // 游标边框css定义    
    cursorborderradius: "5px", //以像素为光标边界半径  圆角   
    autohidemode: false, //是否隐藏滚动条  true的时候默认不显示滚动条,当鼠标经过的时候显示滚动条   
    zindex: "auto", //给滚动条设置z-index值    
    railpadding: {
        top: 0,
        right: -4,
        left: 0,
        bottom: 0
    }, //滚动条的位置
});
相关插件-滚动

网站广播插件

网站发布消息的广播插件
  滚动
 40680  406

苹果applewatch界面

苹果applewatch界面
  滚动
 27901  339

全屏滚动插件带侧边栏

过渡效果柔和的滚动插件,适用pc和手机
  滚动
 37361  450

锚点,可以扩展很多功能

锚点定位,代码实现简单,无依赖其它插件
  滚动
 23759  343

讨论这个项目(18)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    红尘陌上 0
    2024/1/5 9:56:47
    例子也不流畅呢,没有原生的滚动条流畅 回复
    wenwen 0
    2020/8/13 15:56:58
    鼠标滚轮滚动的时候疯狂报错啊
        无问东西1
        2021/5/31 10:32:58
        因为作者在代码中写得有e.preventDefault() 这个方法现在这个不需要写 如果写上得话就会报错直接删掉就行了。
    回复
    未成年人┵ 0
    2019/6/28 16:24:29
    我嵌套的页面,为什么鼠标在内容页无法滚动,只有放在滚动条上才能滚动,并且有点不流畅
        areyouOk0
        2019/6/28 16:35:56
        应该是你内容页问题,你看演示上的例子滚动就很流畅。
        未成年人┵0
        2019/6/28 16:47:47
        我用原生的滚动条就没问题
    回复
    未成年人┵ 0
    2019/6/28 16:23:40
    我嵌套的,为什么鼠标在内容页无法滚动,只有放在滚动条上才能滚动,并且有点不流畅 回复
    烟雨巷9号 0
    2019/5/6 20:25:03
    不好意思刚学不太会使用
    插件很好 回复
    烟雨巷9号 0
    2019/5/6 20:24:21
    您好怎么使用啊。 回复
    _酱油陈 1
    2018/8/17 16:54:51

    首先感谢作者的插件,发现滚动条是无法跟随内容高度变化的(已第一次高度渲染),可以这样赖皮解决:

    $(ele).css('overflow','auto');
    $('ele').niceScroll({ ...});
    $(ele).css('overflow','hidden');

    滚动条重新渲染了。

        艾 林 Ailin0
        2018/9/15 14:20:43
        能否详细点,谢谢!
    回复
    不留胡渣的青年 0
    2018/7/16 14:04:48
    怎么监听内容高度变化 回复
    暗裔剑魔 0
    2018/4/22 12:37:29
    滚动条间隔几秒跳动一次,这个怎么改 回复
    Arima Kousei 0
    2018/3/13 17:18:36
    这个的默认滚动条在底部的参数是什么? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复