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()

配置参数

全局参数

参数名称

默认值

描述

scrollMinUpdateInterval

25 (ms)

默认情况下，滚动条会每秒更新40次，次数越多，滚动轨道更新越不频繁。最小值为16，表示滚动轨道每秒更新60次。

checkFrequency

1000 (ms)

检测滚动区域内容更新的时间。要禁止检测，将值设置为0。

实例参数

参数名称

默认值

描述

preventParentScroll

false

当滚动条到达底部或顶部时防止父容器滚动。在iOS中可以防止页面跳动。

forceScrollbars

false

在iOS, Android 和 OSX系统中使用自定义滚动条。

scrollStopDelay

300 (ms)

假定滚动条停止的时间，然后触发scrollstop事件。

maxTrackSize

95 (%)

滚动条轨道的最大尺寸。

minTrackSize

5 (%)

滚动条轨道的最小尺寸。

draggableTracks

true

是否允许拖拽滚动条轨道。

autoUpdate

true

是否允许滚动条在容器内容更新后自动更新。

classPrefix

'optiscroll-'

自定义class前缀。

例如：

// 改变滚动条的尺寸 - js版本

var myOptiscrollInstance = new Optiscroll(element, { maxTrackSize: 50, minTrackSize: 20 });

// 强制在移动设备上使用自定义滚动条 - jQuery插件

$('#scroll').optiscroll({ forceScrollbars: true });

方法

scrollTo ( destX, destY [, duration] )：滚动到指定位置，并带有平滑过渡的动画效果。如果你只需要在一个轴上滚动，另外一个轴设置为false。默认情况下动画时间根据距离来计算，你也可以设置滚动的动画时间。

destX：允许值：number (px), left, right, false。

destY：允许值：number (px), top, bottom, false。

duration：允许值：number (ms), auto。

例如：

// 垂直滚动500像素

myOptiscrollInstance.scrollTo(false, 500);

/* The jQuery plugin allows you to call a method in two ways */

// 100毫秒时间内水平滚动到右边

$('#scroll').data('optiscroll').scrollTo('right', false, 100);

//水平滚动500像素，垂直滚动到底部

$('#scroll').optiscroll('scrollTo', 500, 'bottom', 'auto');

scrollIntoView (elem [, duration, delta])：在滚动区域视图内进行滚动。对齐方式为最近的边。默认情况下动画时间根据距离来计算。delta是到边部的可选距离，单位像素。每条边的距离都可以定义。

element：允许值：DOM节点, jQuery元素, 字符串 (选择器)。

duration：允许值：number (ms), auto。

delta：允许值：number (px), object with top, left, right, bottom numbers。

例如：

// 在ID为anchor-1的容器中滚动

myOptiscrollInstance.scrollIntoView('#anchor-1');

/* The jQuery plugin allows you to call a method in two ways */

// 在容器中滚动指定的jquery元素，时间500毫秒，距离为到距离边部20像素

var $el = $('.my-element').last();

$('#scroll').data('optiscroll').scrollIntoView($el, 500, 20);

// 在容器中滚动指定的jquery元素，距离为距底部20像素，距右侧30像素

$('#scroll').optiscroll('scrollIntoView', $el, 'auto', { bottom: 20, right: 30 });

update ()：手动更新滚动条。

destroy ()：销毁滚动条插件。

事件

每一个滚动条实例在和用户交互时都会触发一些事件。每一个事件都包含一个detail属性和一些有用的数据。

事件

触发时间

sizechange

当改变滚动容器的clientWidth/clientHeight，或滚动区域的rollWidth/scrollHeight时触发。

scrollstart

用户开始滚动时触发。

scrollstop

当停止滚动时触发。

scrollreachedge

当滚动到任何一条边部时触发。

scrollreachtop

滚动到顶部时触发。

scrollreachbottom

滚动到底部时触发。

scrollreachleft

滚动到左侧时触发。

scrollreachright

滚动到右侧时触发。

Detail对象属性：

名称

描述

scrollbar{V/H}.percent

滚动的百分比，0-100之间。

scrollbar{V/H}.position

滚动条的位置距离左上角的比例，0-1之间。

scrollbar{V/H}.size

滚动条的宽高比，0-1之间。

scrollTop

滚动条距离顶部的距离，单位像素。

scrollLeft

滚动条距离底部的距离，单位像素。

scrollBottom

滚动条距离左侧的距离，单位像素。

scrollRight

滚动条距离右侧的距离，单位像素。

scrollWidth

滚动条的宽度，单位像素。

scrollHeight

滚动条的高度，单位像素。

clientWidth

滚动元素的宽度，单位像素。

clientHeight

滚动元素的高度，单位像素。

例如：

// plain JS listener

document.querySelector('#scroll').addEventListener('scrollreachtop', function (ev) {

console.log(ev.type) // outputs 'scrollreachtop'

console.log(ev.detail.scrollTop) // outputs scroll distance from top

console.log(ev.detail.scrollbarV.percent) // outputs vertical scrolled %

});

// jQuery listener

$('#scroll').on('scrollstop', function (ev) {

console.log(ev.type) // outputs 'scrollstop'

console.log(ev.detail.scrollBottom) // outputs scroll distance from bottom

console.log(ev.detail.scrollbarH.percent) // outputs horizontal scrolled %

});