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

在线预览    源码下载