高性能的纯Js滚动条美化插件

smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作，它具有高性能，自由配置，平滑滚动等特点，支持各种现代桌面浏览器和手机设备。

安装

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

npm install smooth-scrollbar --save
bower install smooth-scrollbar --save                  
                

使用方法

使用该滚动条插件需要在页面中引入smooth-scrollbar.css和smooth-scrollbar.js文件。

<link rel="stylesheet" href="path/to/smooth-scrollbar.css">
<script src="path/to/smooth-scrollbar.js"></script>             
                

HTML结构

你可以使用以下三种HTML结构来生成平滑滚动条。

1、将要滚动的内容包裹在<scrollbar>元素中。

<scrollbar>
    ...
</scrollbar>                
                

2、使用scrollbar属性。

<section scrollbar>
    ...
</section>              
                

3、使用data属性。

<section data-scrollbar>
    ...
</section>              
                

初始化插件

可以使用initAll()方法来初始化页面中所有的滚动条。

Scrollbar.initAll(options);
                

或者通过Scrollbar.init(elem, options)方法来初始化指定的滚动条。

滚动条在初始化之后，会生成下面的HTML结构：

<scrollbar>
    <article class="scroll-content">
        your contents here...
    </article>
    <aside class="scrollbar-track scrollbar-track-x">
        <div class="scrollbar-thumb scrollbar-thumb-x"></div>
    </aside>
    <aside class="scrollbar-track scrollbar-track-y">
        <div class="scrollbar-thumb scrollbar-thumb-y"></div>
    </aside>
</scrollbar>                  
                

配置参数

slinky多级导航菜单插件的配置参数如下：

方法API

• Scrollbar.init( element, [options] )：初始化指定的滚动条，返回scrollbar实例。
• Scrollbar.initAll( [options] )：初始化所有的滚动条，返回一个数组。
• Scrollbar.has( element )：检测指定的元素是否有滚动条。
• Scrollbar.get( element )：获取指定的滚动条，如果没有返回undefined。
• Scrollbar.getAll()：返回包含所有滚动条实例的数组。
• Scrollbar.destroy( element )：移除指定元素上的滚动条。
• Scrollbar.destroyAll()：销毁所有的滚动条实例。

浏览器兼容

• IE 10+
• Chrome 22+
• Firefox 16+
• Safari 8+
• Android Browser 4+
• Chrome for Android 32+
• iOS Safari 7+

smooth-scrollbar滚动条插件的github地址为：https://github.com/idiotWu/smooth-scrollbar