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

当前位置:主页 > jQuery库 > 布局和界面 > 高性能的纯Js滚动条美化插件
高性能的纯Js滚动条美化插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-20
    阅读:
麦子学院
简要教程

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

网友评论