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

参数 类型 默认值 描述
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+

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