一款滚动条插件mCustomScrollbar

Home » JavaScript » web开发 » 一款滚动条插件mCustomScrollbar

Archives

文件夹

考虑到之前自己写的那个功能有欠缺,比如我的只是纵向滚动,这次在自己更新jscroll之余也找到了一个比较完善的插件mCustomScrollbar。

 

mCustomScrollbar

官网:http://manos.malihu.gr/jquery-custom-content-scroller/
github:https://github.com/malihu/malihu-custom-scrollbar-plugin
插件的demo很详细,如果你觉得插件有点大,可以自己优化一下去掉不想要的功能。
注意这类滚动条的插件都要在你的目标元素显示在画布时(能读取到长宽的时候),才能正确渲染,不然你就要自己定宽高了。
我在最近的一个项目中用了它,涉及到一个初始化时内容区域要滚动条从end点开始,并且是横向的。
看代码:
$(".scroll").mCustomScrollbar({
horizontalScroll:true,//横向滚动
scrollButtons:{//是否要左右的箭头按钮
enable:true
},
scrollInertia : 20//滚动的缓动速度
}).mCustomScrollbar("scrollTo","right");//跳到最右

这里注意如果不把scrollInertia设置的低一点,载入的时候会有从左滚到右的动画,最近很懒,就选择了这个比较简单的方案。

发表评论