jQuery.nicescroll美化滚动条

所属分类:UI-滚动

 92733  505  查看评论 (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 //是否隐藏滚动条
});
相关插件-滚动

仿百度知道(滚动固定标题)插件

仿百度知道滚动固定标题,点击标题滚动到内容块
  滚动
 24680  370

CSS3 滚动视觉差效果加返回顶部

CSS3 滚动视觉差效果+返回顶部.
  滚动
 42962  391

jquery模拟滚动条(未封装)

jquery模拟滚动条,支持自定义滚动条样式,兼容pad,web手机端未测试;支持同一网页多个滚动条;支持添加和删除(本人对封装不太了解,未封装)
  滚动
 38781  340

jquery页面滚动定位(支持上下滑动)

jquery页面滚动定位(支持上下滑动)
  滚动
 53748  396

讨论这个项目(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

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