Optiscroll-轻量级纯Js滚动条美化插件

Optiscroll是一款轻量级纯Js滚动条美化插件。该滚动条美化插件可以隐藏原生的滚动条，并生成用户自定义样式的滚动条。它的特点还有：

轻量级，没有任何依赖，压缩后的版本仅9kb。
性能高度优化。
支持水平和垂直滚动条。
支持嵌套滚动条。
支持自定义事件。
可以制作scrollTo和scrollIntoView动画。
滚动区域内容改变时自动更新滚动条。
修复iOS页面弹跳问题。
可以工作在包括IE9+的所有现代浏览器中。
可以作为jquery插件来使用。

使用方法

使用该滚动条插件需要在页面中引入optiscroll.css，optiscroll.js，或者作为jQuery插件来使用，引入jquery和jquery.optiscroll.js文件。

< link rel="stylesheet" href="optiscroll.css">
 
< script src="optiscroll.js">
 
< script src="jquery.optiscroll.js">                 

HTML结构

为你需要美化滚动条的容器添加.optiscroll class。

< div id="scroll" class="optiscroll">
     
     

初始化插件

可以通过下面的方法来初始化该滚动条插件。

// 纯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 %
});