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

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來修改選項。

// 第一步，實例化滾動對象
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的邏輯。

- 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一個對象，要經歷那幾步，替大家總結一下：

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

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

讓頁面動起來。

我們通過在自帶的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...