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

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>

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多级导航菜单插件的配置参数如下：

参数
类型
默认值
描述




speed
Number
1
滚动条的滚动速度


friction
Number
10
滚动的摩擦系数，是一个1-100之间的百分比数


thumbMinSize
Number
20
滚动条的最小尺寸


renderByPixels
Boolean
true
使用整数像素来渲染滚动条，设置为true可以提高性能


continuousScrolling
Boolean|String
'auto'
在当前滚动条滚动到底部时是否让它上面的可滚动内容继续滚动。


overscrollEffect
Boolean|String
false
超出滚动范围时的效果。'bounce'为iOS样式的弹性效果，'glow'为Android 样式的发光效果。使用该选项会对性能有所影响。


overscrollEffectColor
String
'#87ceeb'
'glow'效果的颜色

方法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+