Optiscroll是一款轻量级纯Js滚动条美化插件。该滚动条美化插件可以隐藏原生的滚动条,并生成用户自定义样式的滚动条。它的特点还有:
- 轻量级,没有任何依赖,压缩后的版本仅9kb。
- 性能高度优化。
- 支持水平和垂直滚动条。
- 支持嵌套滚动条。
- 支持自定义事件。
- 可以制作scrollTo和scrollIntoView动画。
- 滚动区域内容改变时自动更新滚动条。
- 修复iOS页面弹跳问题。
- 可以工作在包括IE9+的所有现代浏览器中。
- 可以作为jQuery插件来使用。
安装
可以通过bower来安装该滚动条插件。
bower install optiscroll --save
使用方法
使用该滚动条插件需要在页面中引入optiscroll.css,optiscroll.js,或者作为jQuery插件来使用,引入jquery和jquery.optiscroll.js文件。
<link rel="stylesheet" href="optiscroll.css"> <!-- js版本 --> <script src="optiscroll.js"></script> <!-- 或者作为jQuery插件 --> <script src="jquery.optiscroll.js"></script>
HTML结构
为你需要美化滚动条的容器添加.optiscroll
class。
<div id="scroll" class="optiscroll"> <!-- scrollable area, an additional wrapper will be created --> </div>
初始化插件
可以通过下面的方法来初始化该滚动条插件。
// 纯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 % });
Optiscroll滚动条美化插件的github地址为:https://github.com/wilsonfletcher/Optiscroll
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!