jQuery.nicescroll美化滚动条

所属分类:UI-滚动

 91719  503  查看评论 (85)
分享到微信朋友圈
X
jQuery.nicescroll美化滚动条 ie兼容6

1.  引用jquery.js和jquery.nicescroll.js

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>

2.通过jquery获取需要添加滚动条的元素,调用niceScroll函数进行配置即可使用该插件,如下

$('#content').niceScroll({
    cursorcolor: "#ccc",//#CC0071 光标颜色
    cursoropacitymax: 1, //改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0
    touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
    cursorwidth: "5px", //像素光标的宽度
    cursorborder: "0", // 游标边框css定义
    cursorborderradius: "5px",//以像素为光标边界半径
    autohidemode: false //是否隐藏滚动条
});
相关插件-滚动

视觉滚动差效果

纯css3写的滚动视差效果
  滚动
 30974  357

滚动条

可定制的滚动条,通过js+css实现
  滚动
 52528  335

jQuery双锚点自动定位

jQuery滚动自自动锚点定位
  滚动
 35425  420

javript自定义滚动条

用原生的javript写的自定义滚动条具有拖拽,滚轮事件和键盘事件
  滚动
 31932  356

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

    __lllllll 0
    2019/2/13 15:24:10
    请问这个高度怎么设置啊
        wangmengone0
        2019/5/8 17:03:59
        我也想知道
    回复
    浅念。 0
    2019/1/24 11:19:15
    如果在弹框里边的话就页面滚动的话滚动条就跑了 回复
    飞天小猪 0
    2018/10/24 1:02:31
    为什么引入js文件后显示nicescroll is not a function????????? 回复
    何英威 0
    2018/7/20 15:56:38
    请问下 我给整个html加了nicescroll 但是我页面高度动态变化,滚动条确没有刷新,该如何解决,谢谢 回复
    Akin??????? 0
    2018/4/18 12:28:01
    做了个点击按钮div隐藏的效果,结果div的display:none了,这个滚动条却还在
        Tang0
        2018/5/18 16:12:00
        确实,我也是
        guobingtao0
        2018/5/24 15:01:38
        直接设置滚动条不显示
    回复
    emillet 0
    2018/4/11 15:46:46
    请问,怎么解决多次进行查询时,滚动条会反应比较迟钝,无法使用鼠标滚轮事件 回复
    汤泽彬 0
    2018/4/9 15:50:07
    能不能分享一下 谢谢啦
    邮箱1335715789@qq.com 回复
    ASmallFirm丶 0
    2018/1/24 11:51:47
    横向怎么设置? 回复
    ling是铃铛的铃 0
    2018/1/15 14:15:20

    请问有没有遇到autohidemode设置false情况下,滚动条没显示出来,按f12才出现滚动条

    回复
    【烟花易冷】jerry 0
    2018/1/4 10:11:37

    求一份插件,谢谢了,405026290@qq.com

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复