解决多场景/多端的页面滚动缩放组件-ScrollerJS

ScrollerJS是什么

ScrollerJS是用于纯逻辑的滚动缩放组件，它独立于任何指定的渲染或者事件系统。上面是官方定义的，我再说一下我对这个库的理解，此次我使用ScrollerJS主要是在处理移动端的页面滚动，不使用Scroller库的话，咱们用原生的方法实现这种效果的话，就是监听页面的touch事件，其实页面自己就是在监听touch事件，实现页面跟随手势去移动。如今假设咱们实现的效果是，相似于native app那种左右页面滑动的效果，依靠默认的touch事件确定是不够的，咱们一般的作法就是主动监听touch事件，修改touch事件默认的操做，这样就能够利用自带的touch事件实现本身的滚动缩放的需求。ScrollerJS帮咱们作的就是这样的事情，你们能够打开 https://my.browser.miui.com/ ，右键F12切换成移动端模式，能够看到咱们在滚动页面时，滚动是有惯性的，好比咱们还须要作一个下拉刷新什么的，本身实现仍是比较麻烦，ScrollerJS应用而生，咱们在touch事件中调用ScrollerJS提供的事件，完成这一套丰富而又强大的功能

特性

• 可自定义启用/禁用x轴和y轴的滚动

  • 就是说能够自定义页面是否能在这俩轴滚动

• 减速（当用户动做结束时减速）

  • 移动端touch后的惯性

• 弹跳（弹回边缘）

  • 拖动页面一直往下拉，松手后，页面相似于小球掉地上，一直与边缘减速碰撞以致静止
• 分页（对齐整页宽度/高度）
• 捕捉（捕捉到用户可定义的像素网格）
• 缩放（自动居中缩放或基于视图中具备可配置的最小/最大缩放的点）
• 锁定（根据初始移动锁定拖动方向）
• 下拉刷新
• 可配置是否应使用动画。

页面滑动配置对象

这些是可用选项及其默认值。可使用第二个构造函数参数或在运行时经过修改scrollerObj.options.optionName来修改选项。

使用方法

首先看一下简易demo：

// 第一步，实例化滚动对象
var scrollerObj = new Scroller(function(left, top, zoom) {
    // apply coordinates/zooming
}, {
    scrollingY: false
});

// Configure to have an outer dimension of 1000px and inner dimension of 3000px
scrollerObj.setDimensions(1000, 1000, 3000, 3000);

代码其实仍是蛮简单的，首先咱们初始化一个滚动的实例，Scroller构造函数拥有两个参数，第一个是一个负责管理页面滚动时须要处理事务的函数，这个函数接受三个参数，分别表示当前页面左移，向上移，缩放比信息。第二个参数是，页面滚动相关的配置对象，经过这个对象，咱们能够声明页面如何滚动等，具体参数见上面的总结。这样咱们就实例化了一个滚动对象。接着看下面那行代码：

scrollerObj.setDimensions(clientWidth, clientHeight, contentWidth, contentHeight);

这行代码的意思是，让咱们设置页面滚动的区域，以及页面滚动内容的长度。咱们普通状况下，出现页面滚动是由于咱们的页面内容太多，才出现的这种状况，如今咱们要覆盖原生的这种逻辑，实现起来固然不一样，咱们既然要滑动页面，那就不是经过判断页面的内容是否溢出，而是直接指定，咱们页面的滚动内容长度是多少。

自此，咱们已经定义好了页面该以怎样的方式进行移动，以及页面滚动的区域和大小。可是如今咱们仍是无法移动，为何呢，就是我开头说的，咱们须要监听原有的touch事件，在焉有的touch事件中，加入ScrollerJS的逻辑。

接着咱们明确一下，ScrollerJS自带了哪些事件？

- doMouseZoom(wheelDelta, timeStamp, pageX, pageY)
- doTouchStart(touches, timeStamp)
- doTouchMove(touches, timeStamp, scale)
- doTouchEnd(timeStamp)

注意，对于移动端，咱们须要传递给doTouch* 这些方法原生的touches对象数据（native touches event data）。这是什么意思呢，挖个坑后面讲一下。对于使用鼠标的PC端，咱们传递一个只含有一个元素的数组，模拟这种状况：

Touch device: doTouchMove(e.touches, e.timeStamp);       // 移动端涉及多指触摸，因此存在touches
Mouse device: doTouchMove([e], e.timeStamp);   // PC端，固然不存在多指，因此经过这种hack方式解决问题

最后咱们须要使用鼠标滚轮进行缩放的话，能够这么使用：

doMouseZoom(e.wheelDelta, e.timeStamp, e.pageX, e.pageY);

说了这么多，其实你会发现我依然是在讲一些基础的概念，你可能会问，为啥页面还没动起来呢？往下看

让页面动起来

前面讲了一大堆，其实只是分为两部分，第一部分阐述了ScrollerJS是什么，能干什么。第二部分阐述了实例ScrollerJS一个对象，要经历那几步，替你们总结一下：

1. var scrollerObj = new Scroller(function(left, top, zoom){}, configObj);
2. 声明滚动区域信息: scrollerObj.setDemensions(clientWidth, clientHeight, contentWidth, contentHeight);
3. 让页面动起来。

咱们经过在自带的touch事件种绑定ScrollerJS提供的方法，实现自定义滚动：

var body = document.body, // 我随便用的body，你们用啥都行，由于scrollerJS能够经过setDemensions建立局部滚动区域
    clientWidth = window.innerWidth,
    clientHeight = window.innerHeight,
    contentWidth = window.innerwWidth * 5,
    contentHeight = window.innerHeight;
    
body.addEventListener('touchstart', e => {
    doTouchStart(e.touches, e.timeStamp);
}, false);

body.addEventListener('touchmove', e => {
    doTouchMove(e.touches, e.timeStamp, e.scale);
}, false);

body.addEventListener('touchend', e => {
    doTouchEnd(e.timeStamp);
}, false);

自此，咱们的页面就滚动起来了，前面挖了个坑尚未填，问题是，为何要强调用原生touch事件对象的touches呢。那是由于，咱们在使用createjs，PixiJS这种canvas框架时，页面的滚动其实在引入框架的时候，已是被覆盖掉了。咱们正常的move事件是不能被触发的，拿createjs举例，页面的滚动应该监听舞台stage的stagemousemove移动事件，这个时候上面的代码就变成了：

stage.addEventListener('stagemousedown', e => {
        doTouchStart(e.nativeEvent.touches, e.timeStamp);  // 这里的e.nativeEvent才是页面原生事件对象
    }, false);
    
    stage.addEventListener('stagemousemove', e => {
        doTouchMove(e.nativeEvent.touches, e.timeStamp, e.scale);
    }, false);
    
    stage.addEventListener('stagemouseup', e => {
        doTouchEnd(e.timeStamp);
    }, false);

能够看到，stagemousemove等三个事件传入的e事件对象，实际上是createjs本身构造的一个事件对象，并非浏览器本身的那一套，因此咱们须要调用nativeEvent来进行touches的传递

总结

ScrollerJS不只能解决平常滚动缩放相关的逻辑难点，也能在canvas等平台大放异彩，自定义滑动效果当之无愧首选。更多内容请转移
GitHub：https://github.com/parkeeers/...
在线Demo：http://zynga.github.com/scrol... http://zynga.github.io/scroll...