[聚合文章] MoveTo，一款无依赖、轻量级的滚动插件
作者：王磊，来自陆金所大前端。
安装方式
安装方式同时支持yarn、npm和bower。
npm
$ npm install moveto --saveYarn
$ yarn add movetoBower
$ bower install moveTo --save该插件有两种使用方法可供选择：
- 通过Id选择器获取目标对象的DOM元素，通过moveTo.move(target)实现滚动，示例代码如下：
const moveTo = new MoveTo();const target = document.getElementById(‘target’);moveTo.move(target);2. 首先给a标签或button标签添加class="js-trigger"属性，之后获取到该属性的DOM元素，示例代码如下：
//register a triggerconst trigger = document.getElementsByClassName('js-trigger')[0];moveTo.registerTrigger(trigger);在HTML代码中，你可以通过添加以mt为前缀的属性值来传递想要添加的Options，但是！！Option名称必须满足kebab case格式要求(作者身为土耳其人~看样子很喜欢土耳其烤肉)。
这里以第二种方法为例，列出相应的HTML语法：
<a href="#target" class="js-trigger" data-mt-duration="300">Trigger</a><!-- Or --><button type="button" class="js-trigger" data-target="#target" data-mt-duration="300">Trigger</button>可选参数Options
通过设置Options,可以为页面滚动添加动画、完成时间、回调函数以及距目标元素的偏差。
默认的Options参数如下:
new MoveTo({ tolerance: 0, duration: 800, easing: 'easeOutQuart'})参数默认值描述tolerance0屏幕滚动的终点距目标元素的偏差，可为正数或负数duration800屏幕滚动持续时间，以毫秒为单位easingeaseOutQuart缓函数动画效果名称callbacknoop回调函数，在屏幕滚动完成后执行
API
move(target,options)
从屏幕当前位置滚动至目标位置
【target】
target参数的类型包括HTML的DOM元素或数字，比如1000表示1000px
该参数表示屏幕滚动后与页面顶部的距离
【options】
options参数的类型是Object
该参数用来传递上面介绍的各项可选参数
registerTrigger(trigger,callback)
【trigger】
其类型是获取到的HTMLDOM元素
这是当按钮或超链接被点击后触发页面滚动的触发器
【callback】
该参数表示页面在完成滚动后自动执行的回调函数
重点是该callback参数会自动覆盖掉options里定义的callback参数
addEaseFunction(name,fn)
添加自定义的缓动函数
【name】
其类型是字符串，声明将要添加的缓动函数名称
【fn】
缓动函数。更多的缓动函数参见 这里
下面来举几个栗子
在创建实例的时候传递参数options={duration:1000,easing:‘easeInQuad’}
document.addEventListener('DOMContentLoaded', function () { const easeFunctions = { easeInQuad: function (t, b, c, d) { t /= d; return c * t * t + b; }, easeOutQuad: function (t, b, c, d) { t /= d; return -c * t* (t - 2) + b; } } const moveTo = new MoveTo({ duration: 1000, easing: 'easeInQuad' }, easeFunctions); const trigger = document.getElementsByClassName('js-trigger')[0]; moveTo.registerTrigger(trigger);});添加回调函数，registerTrigger和move方法中的回调函数能够自动覆盖MoveTo实例中options参数定义的回调函数
document.addEventListener('DOMContentLoaded', function () { const moveTo = new MoveTo({ duration: 1000, callback: function (target) { // This will run if there is no overwrite } }); const trigger = document.getElementsByClassName('js-trigger')[0]; moveTo.registerTrigger(trigger, function (target) { // Overwrites global callback }); // Or moveTo.move(1200, { duration: 500, callback: function () { // Overwrites global callback } });});通过unregister()方法能够移除已注册的触发器
document.addEventListener('DOMContentLoaded', function () { const moveTo = new MoveTo(); const trigger = document.getElementsByClassName('js-trigger')[0]; // Register a trigger const unregister = moveTo.registerTrigger(trigger, { duration: 500 }); // Unregister a trigger unregister();});我们也可以使用开发者模式
# 通过yarn安装相关的开发依赖$ yarn# 通过npm安装相关的开发依赖$ npm install# 启动本地服务器$ gulp serve# 检查JS语法是否有错误或警告$ gulp scripts:lint# 重新打包项目$ gulp build# Yarn启动测试$ yarn test# npm启动测试$ npm test浏览器支持的版本
支持IE10+和当前Chrome、Firefox、Safari浏览器的稳定版本。
如果需要兼容低版本浏览器，可以考虑添加polyfills/shims，增加对requestAnimationFrame的支持。
总结
这是一款非常轻量级的页面滚动插件，可定义的参数也比较丰富，无需重复造轮子，该插件就能满足大多数页面滚动的需求，为广大开发者们提供了便利。
「真诚赞赏，手留余香」
还没有人赞赏，快来当第一个赞赏的人吧！