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