摘要：使用方法首先看一下簡(jiǎn)易第一步，實(shí)例化滾動(dòng)對(duì)象代碼其實(shí)還是蠻簡(jiǎn)單的，首先我們初始化一個(gè)滾動(dòng)的實(shí)例，構(gòu)造函數(shù)擁有兩個(gè)參數(shù)，第一個(gè)是一個(gè)負(fù)責(zé)管理頁(yè)面滾動(dòng)時(shí)需要處理事務(wù)的函數(shù)，這個(gè)函數(shù)接受三個(gè)參數(shù)，分別表示當(dāng)前頁(yè)面左移，向上移，縮放比信息。

ScrollerJS是用于純邏輯的滾動(dòng)縮放組件，它獨(dú)立于任何指定的渲染或者事件系統(tǒng)。上面是官方定義的，我再說(shuō)一下我對(duì)這個(gè)庫(kù)的理解，這次我使用ScrollerJS主要是在處理移動(dòng)端的頁(yè)面滾動(dòng)，不使用Scroller庫(kù)的話(huà)，我們用原生的方法實(shí)現(xiàn)這種效果的話(huà)，就是監(jiān)聽(tīng)頁(yè)面的touch事件，其實(shí)頁(yè)面本身就是在監(jiān)聽(tīng)touch事件，實(shí)現(xiàn)頁(yè)面跟隨手勢(shì)去移動(dòng)。現(xiàn)在假設(shè)我們實(shí)現(xiàn)的效果是，類(lèi)似于native app那種左右頁(yè)面滑動(dòng)的效果，依靠默認(rèn)的touch事件肯定是不夠的，我們通常的做法就是主動(dòng)監(jiān)聽(tīng)touch事件，修改touch事件默認(rèn)的操作，這樣就可以利用自帶的touch事件實(shí)現(xiàn)自己的滾動(dòng)縮放的需求。ScrollerJS幫我們做的就是這樣的事情，大家可以打開(kāi) https://my.browser.miui.com/ ，右鍵F12切換成移動(dòng)端模式，可以看到我們?cè)跐L動(dòng)頁(yè)面時(shí)，滾動(dòng)是有慣性的，比如我們還需要做一個(gè)下拉刷新什么的，自己實(shí)現(xiàn)還是比較麻煩，ScrollerJS應(yīng)用而生，我們?cè)趖ouch事件中調(diào)用ScrollerJS提供的事件，完成這一套豐富而又強(qiáng)大的功能

可自定義啟用/禁用x軸和y軸的滾動(dòng)

就是說(shuō)可以自定義頁(yè)面是否能在這倆軸滾動(dòng)

減速（當(dāng)用戶(hù)動(dòng)作結(jié)束時(shí)減速）

移動(dòng)端touch后的慣性

彈跳（彈回邊緣）

拖動(dòng)頁(yè)面一直往下拉，松手后，頁(yè)面類(lèi)似于小球掉地上，一直與邊緣減速碰撞以至靜止

分頁(yè)（對(duì)齊整頁(yè)寬度/高度）

捕捉（捕捉到用戶(hù)可定義的像素網(wǎng)格）

縮放（自動(dòng)居中縮放或基于視圖中具有可配置的最小/最大縮放的點(diǎn)）

鎖定（根據(jù)初始移動(dòng)鎖定拖動(dòng)方向）

下拉刷新

可配置是否應(yīng)使用動(dòng)畫(huà)。

這些是可用選項(xiàng)及其默認(rèn)值。可以使用第二個(gè)構(gòu)造函數(shù)參數(shù)或在運(yùn)行時(shí)通過(guò)修改scrollerObj.options.optionName來(lái)修改選項(xiàng)。

// 第一步，實(shí)例化滾動(dòng)對(duì)象
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);

代碼其實(shí)還是蠻簡(jiǎn)單的，首先我們初始化一個(gè)滾動(dòng)的實(shí)例，Scroller構(gòu)造函數(shù)擁有兩個(gè)參數(shù)，第一個(gè)是一個(gè)負(fù)責(zé)管理頁(yè)面滾動(dòng)時(shí)需要處理事務(wù)的函數(shù)，這個(gè)函數(shù)接受三個(gè)參數(shù)，分別表示當(dāng)前頁(yè)面左移，向上移，縮放比信息。第二個(gè)參數(shù)是，頁(yè)面滾動(dòng)相關(guān)的配置對(duì)象，通過(guò)這個(gè)對(duì)象，我們可以聲明頁(yè)面如何滾動(dòng)等，具體參數(shù)見(jiàn)上面的總結(jié)。這樣我們就實(shí)例化了一個(gè)滾動(dòng)對(duì)象。接著看下面那行代碼：

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

這行代碼的意思是，讓我們?cè)O(shè)置頁(yè)面滾動(dòng)的區(qū)域，以及頁(yè)面滾動(dòng)內(nèi)容的長(zhǎng)度。我們普通情況下，出現(xiàn)頁(yè)面滾動(dòng)是因?yàn)槲覀兊捻?yè)面內(nèi)容太多，才出現(xiàn)的這種情況，現(xiàn)在我們要覆蓋原生的這種邏輯，實(shí)現(xiàn)起來(lái)當(dāng)然不同，我們既然要滑動(dòng)頁(yè)面，那就不是通過(guò)判斷頁(yè)面的內(nèi)容是否溢出，而是直接指定，我們頁(yè)面的滾動(dòng)內(nèi)容長(zhǎng)度是多少。

自此，我們已經(jīng)定義好了頁(yè)面該以怎樣的方式進(jìn)行移動(dòng)，以及頁(yè)面滾動(dòng)的區(qū)域和大小。但是現(xiàn)在我們還是沒(méi)法移動(dòng)，為什么呢，就是我開(kāi)頭說(shuō)的，我們需要監(jiān)聽(tīng)原有的touch事件，在焉有的touch事件中，加入ScrollerJS的邏輯。

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

注意，對(duì)于移動(dòng)端，我們需要傳遞給doTouch* 這些方法原生的touches對(duì)象數(shù)據(jù)（native touches event data）。這是什么意思呢，挖個(gè)坑后面講一下。對(duì)于使用鼠標(biāo)的PC端，我們傳遞一個(gè)只含有一個(gè)元素的數(shù)組，模擬這種情況：

Touch device: doTouchMove(e.touches, e.timeStamp);       // 移動(dòng)端涉及多指觸摸，所以存在touches
Mouse device: doTouchMove([e], e.timeStamp);   // PC端，當(dāng)然不存在多指，所以通過(guò)這種hack方式解決問(wèn)題

最后我們需要使用鼠標(biāo)滾輪進(jìn)行縮放的話(huà)，可以這么使用：

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

說(shuō)了這么多，其實(shí)你會(huì)發(fā)現(xiàn)我依然是在講一些基礎(chǔ)的概念，你可能會(huì)問(wèn)，為啥頁(yè)面還沒(méi)動(dòng)起來(lái)呢？往下看

前面講了一大堆，其實(shí)只是分為兩部分，第一部分闡述了ScrollerJS是什么，能干什么。第二部分闡述了實(shí)例ScrollerJS一個(gè)對(duì)象，要經(jīng)歷那幾步，替大家總結(jié)一下：

var scrollerObj = new Scroller(function(left, top, zoom){}, configObj);

聲明滾動(dòng)區(qū)域信息: scrollerObj.setDemensions(clientWidth, clientHeight, contentWidth, contentHeight);

讓頁(yè)面動(dòng)起來(lái)。

我們通過(guò)在自帶的touch事件種綁定ScrollerJS提供的方法，實(shí)現(xiàn)自定義滾動(dòng)：

var body = document.body, // 我隨便用的body，大家用啥都行，因?yàn)閟crollerJS可以通過(guò)setDemensions創(chuàng)建局部滾動(dòng)區(qū)域
    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);

自此，我們的頁(yè)面就滾動(dòng)起來(lái)了，前面挖了個(gè)坑還沒(méi)有填，問(wèn)題是，為什么要強(qiáng)調(diào)用原生touch事件對(duì)象的touches呢。那是因?yàn)椋覀冊(cè)谑褂胏reatejs，PixiJS這種canvas框架時(shí)，頁(yè)面的滾動(dòng)其實(shí)在引入框架的時(shí)候，已經(jīng)是被覆蓋掉了。我們正常的move事件是不能被觸發(fā)的，拿createjs舉例，頁(yè)面的滾動(dòng)應(yīng)該監(jiān)聽(tīng)舞臺(tái)stage的stagemousemove移動(dòng)事件，這個(gè)時(shí)候上面的代碼就變成了：

    stage.addEventListener("stagemousedown", e => {
        doTouchStart(e.nativeEvent.touches, e.timeStamp);  // 這里的e.nativeEvent才是頁(yè)面原生事件對(duì)象
    }, false);
    
    stage.addEventListener("stagemousemove", e => {
        doTouchMove(e.nativeEvent.touches, e.timeStamp, e.scale);
    }, false);
    
    stage.addEventListener("stagemouseup", e => {
        doTouchEnd(e.timeStamp);
    }, false);

可以看到，stagemousemove等三個(gè)事件傳入的e事件對(duì)象，其實(shí)是createjs自己構(gòu)造的一個(gè)事件對(duì)象，并不是瀏覽器自己的那一套，所以我們需要調(diào)用nativeEvent來(lái)進(jìn)行touches的傳遞

ScrollerJS不僅能解決日常滾動(dòng)縮放相關(guān)的邏輯難點(diǎn)，也能在canvas等平臺(tái)大放異彩，自定義滑動(dòng)效果當(dāng)之無(wú)愧首選。更多內(nèi)容請(qǐng)轉(zhuǎn)移
GitHub：https://github.com/parkeeers/...
在線(xiàn)Demo：http://zynga.github.com/scrol... http://zynga.github.io/scroll...