解决多场景/多端的页面滚动缩放组件-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...