html5滚动条美化,Optiscroll-轻量级纯Js滚动条美化插件

Optiscroll是一款轻量级纯Js滚动条美化插件。该滚动条美化插件可以隐藏原生的滚动条，并生成用户自定义样式的滚动条。它的特点还有：

轻量级，没有任何依赖，压缩后的版本仅9kb。

性能高度优化。

支持水平和垂直滚动条。

支持嵌套滚动条。

支持自定义事件。

可以制作scrollTo和scrollIntoView动画。

滚动区域内容改变时自动更新滚动条。

修复iOS页面弹跳问题。

可以工作在包括IE9+的所有现代浏览器中。

可以作为jQuery插件来使用。

安装

可以通过bower来安装该滚动条插件。

bower install optiscroll --save

使用方法

使用该滚动条插件需要在页面中引入optiscroll.css，optiscroll.js，或者作为jQuery插件来使用，引入jquery和jquery.optiscroll.js文件。

HTML结构

为你需要美化滚动条的容器添加.optiscroll class。

初始化插件

可以通过下面的方法来初始化该滚动条插件。

// 纯js

var element = document.querySelector('#scroll')

var myOptiscrollInstance = new Optiscroll(element);

// jQuery插件

$('#scroll').optiscroll()

配置参数

全局参数

参数名称

默认值

描述