scrollbot是一款纯js滚动条美化插件。scrollbot不使用mousewheel来制作滚动效果,它实际上是隐藏原生的滚动条,并为指定的容器添加一个可自定义的滚动条效果。
使用方法
在页面中引入scrollbot.js文件。
<script src="scrollbot.js"></script>
初始化插件
在页面DOM元素加载完毕之后,可以通过new scrollbot(element,width)
方法来创建自定义的滚动条。其中,element
是要显示滚动条的元素,width
是滚动条的宽度。
var customScroll = new scrollbot(element,width)
方法API
你可以通过.setStyle(scrollbar,scrollbarholder)
方法来设置滚动条的样式。其中,scrollbar
是滚动条,scrollbarholder
是包裹滚动条的容器。例如:
customScroll.setStyle({ 'background':'#000', 'border-radius':'20px' },{ 'background':'#fff', 'opacity':'.5' })
其它可用的方法还有:
.setScroll(scrollPosition,duration)
:使滚动条在指定的时间内滚动到指定的位置。
.refresh()
:在窗口尺寸改变时重新计算滚动条的位置。
.onScroll(function)
:在滚动条滚动时执行的回调函数。
.destroy()
:销毁自定义滚动条。
scrollbot滚动条美化插件的github地址为:https://github.com/akzhy/scrollbot
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!