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

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

可自定義啟用/禁用x軸和y軸的滾動

就是說可以自定義頁面是否能在這倆軸滾動

減速（當(dāng)用戶動作結(jié)束時減速）

移動端touch后的慣性

彈跳（彈回邊緣）

拖動頁面一直往下拉，松手后，頁面類似于小球掉地上，一直與邊緣減速碰撞以至靜止

分頁（對齊整頁寬度/高度）

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

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

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

下拉刷新

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

這些是可用選項及其默認(rèn)值?？梢允褂玫诙€構(gòu)造函數(shù)參數(shù)或在運(yùn)行時通過修改scrollerObj.options.optionName來修改選項。

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

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

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

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

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

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

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

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

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

說了這么多，其實(shí)你會發(fā)現(xiàn)我依然是在講一些基礎(chǔ)的概念，你可能會問，為啥頁面還沒動起來呢？往下看

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

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

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

讓頁面動起來。

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

var body = document.body, // 我隨便用的body，大家用啥都行，因?yàn)閟crollerJS可以通過setDemensions創(chuà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);

自此，我們的頁面就滾動起來了，前面挖了個坑還沒有填，問題是，為什么要強(qiáng)調(diào)用原生touch事件對象的touches呢。那是因?yàn)?，我們在使用createjs，PixiJS這種canvas框架時，頁面的滾動其實(shí)在引入框架的時候，已經(jīng)是被覆蓋掉了。我們正常的move事件是不能被觸發(fā)的，拿createjs舉例，頁面的滾動應(yīng)該監(jiān)聽舞臺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事件對象，其實(shí)是createjs自己構(gòu)造的一個事件對象，并不是瀏覽器自己的那一套，所以我們需要調(diào)用nativeEvent來進(jìn)行touches的傳遞

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