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