摘要：處理函數處理函數都是和檢測事件對應的，每一類檢測事件都有相應的處理函數。為時，會將等事件綁定到的對象。可通過對進行銷毀。注冊事件，可注冊的函數類型為下一小節函數。

做了一些移動端的產品，發現一些滾動效果很多會使用 iscroll 作為底層庫（如阿里小蜜）。iscroll 的文檔已經好久沒更新了，而且比較簡單，經常需要直接讀源碼。這里寫一篇總結，作為對 iscroll API的整理。而 iscroll 的庫 probe，lite，zoom，infinite 和標準庫等多個版本，而 probe 是平時運用的比較多的一個庫，除了 iscroll 的標準庫之外，還有 snap（廣義翻頁） 功能。這里主要以 probe 做整理。去掉里面的 scrollbars/indicators 部分，因為這兩部分內容一般視覺不會有太多要求。但這一部分的內容在 iscroll 庫中和 iscroll 的主體內容同等地位，個人覺得沒有必要。

仔細想想，如果我們要實現類似功能的觸控庫，我們會怎么做？正常思路大概就是：

檢測 ->  處理數據 -> 產生位移

思路大概就是這樣，和現實生活中的控制很類似：通過傳感器檢測數據，而我們這里的檢測設備就是注冊的一系列事件。檢測到的數據往往屬于原始數據，沒有辦法直接使用，這里就需要進行相應的處理。處理完后，就需要滾動屏幕，對應到實現就是操作 dom 的位置屬性。

仔細看了一下 iscroll 的源碼，果然也是采用類似的思路，一下是 iscroll 核心處理邏輯：

檢測

首先，iscroll 檢測是每次初始化的時候，通過 HandEvent 注冊一系列的函數。為了同時兼容無線和 PC 等多個端，同一類型的事件需要注冊多個。簡單的分有以下幾類：

start 類型事件，如：touchstart，pointerdown，MSPointerDown，mousedown.

move 類型事件，如：touchmove，pointermove，MSPointerMove，mousemove。

end 類型事件，如：touchend，pointerup，touchcancel等。

除了以上三個，還有 transitionend，wheel，keydown，click 等一系列事件。

處理函數
處理函數都是和檢測事件對應的，每一類檢測事件都有相應的處理函數。如：

_start(e) 函數對應 start 類型事件。

_move(e) 函數對應 move 類型事件。

_end(e) 函數對應 end 類型事件。

除此之外，還有 _transitionEnd(e)，_wheel(e)，_key(e) 等處理函數。

運動函數
處理函數處理好相應數據和邏輯之后，會在處理函數中調用運動相關的函數。而運動相關的函數主要做一些位移變換，iscroll 對這些位移變換做了很多兼容性的處理。

_translate( x, y) 是平移運動的核心函數。其中支持 transform 和 "left" 兩種移動方式。

_animate(destX, destY, duration, easingFn) 是帶 "transtion" 效果的運動函數，當不支持或關閉 transtion 調用該函數。此函數基于 requestAnimationFrame 做位置移動。

除了這兩個內部運動函數之外，iscroll 還提供了 scrollBy，scrollTo，scrollToElement，goToPage，next，prev 等一系列的 API 供外部調用。

var myScroll = new IScroll("#wrapper", {
    mouseWheel: true,
    scrollbars: true
});

初始化出入的第二個參數為配置，會掛載到 myScroll 的 options 屬性上。

HWCompositing：是否采用 3D 加速，同時 iscroll 內部還會對客戶端是否支持 perspective 屬性共同決定。

useTransition：是否采用 css3 的 transition，同時 iscroll 內部還會對客戶端是否支持該屬性共同決定。

useTransform：是否采用 css3 的 transform，同時 iscroll 內部還會對客戶端是否支持該屬性共同決定。

tap,click：iscroll 中的兩個自定義事件，配置為 string,需要執行的自定義事件。

eventPassthrough：默認為 undefine,為 true 時，關閉默認方向滾動（scrollY）。

bindToWrapper：默認為undefine，控制初始化事件綁定到什么對象上。為 true 時，會將 touch, mousemove 等事件綁定到 iscroll 的 dom 對象。否則，綁定到 window 上。

preventDefault：默認為 true，在各個運動函數中和其他值配合使用。eventPassthrough 為 true 時，設置為 false.

preventDefaultException：默認值 /^(INPUT|TEXTAREA|BUTTON|SELECT)$/，和preventDefault，即內部函數isBadAndroid配合使用，在各個運動函數中執行。

scrollY,scrollX:，初始值為 y 軸方向滾動，即 scrollY 為 true.

freeScroll：默認為 flase，scrollX 和此值同時設置為 true 時，可想任意方向滾動。

directionLockThreshold：默認值為 5，鎖定方向的一個閥值，一個方向持續滑動超過這個閥值之后，才會鎖定另一方向，一般不需要改動。

resizePolling：默認值 60ms，控制下拉刷新時間。

probeType：默認為 undefine, 可設置為1，2，3。主要用于開啟監聽 scroll， 值越大靈敏度越高，越耗性能。

momentum：默認為 true，運動的物理引擎，對性能有影響，可關閉。

snap：默認為 undefine，設置為 true 后，可按一定步長移動。

snapSpeed：默認為 300ms，transitionTime 的時間。

snapStepX,snapStepY：默認為 iscroll 的高度或寬度，可設為某一數字，按照相應距離移動。

snapThreshold：默認為0.334，移動到下一步長的閥值系數，此值乘對應頁的寬或高。

bounce：默認true，是否開啟彈動效果。

bounceEasing：默認為 circular，彈動效果。

bounceTime：默認600ms, 彈動事件

disableMouse,disablePointer,disableTouch：默認為 undefine, 設為 true 時，初始化時會不注冊相應事件，達到不響應的效果。

mouseWheel：默認為 undefine，設置為 true 后，開啟滑輪。

mouseWheelSpeed：默認為 20ms。

invertWheelDirection：滾動輪方向，無特殊情況不用關注。

keyBindings 默認為鍵值對，可設置{down: 40}，對應的向下鍵，向下移動。

destroy()： destory只會銷毀所有綁定事件，并不會銷毀 iscroll。可通過 iscroll = null 對 iscroll進行銷毀。此函數還會觸發 destory 事件。

refresh()：調整容器位置，［注意］每次新增或刪除 dom 節點后需調用此方法。

on(type, fn)：注冊 isroll 事件，可注冊的函數類型為下一小節函數。

off(type, fn)：銷毀事件。
resetPosition(time)：重置到初始位置。time 為 動效時間。

disable()：靜止滑動

enable ()：可滑動。

scrollBy(x, y, time, easing)：增加多少像素滑動。

scrollTo(x, y, time, easing)：滾動到某一像素。

scrollToElement(el, time, offsetX, offsetY, easing)：滾動到某一元素。

getComputedPosition()：獲得計算之后的位置，主要鍵盤中使用。

goToPag(x, y, time, easing)：滾動到某一頁，snap 中使用。

next()：滾動到下一頁，snap 中使用。

prev()：滾動到上一頁，snap 中使用。

beforeScrollStart

scrollStart

scrollCancel

scroll

scrollEnd

destroy

refresh

iscroll 有很多優點，最主要的是相對穩定，還有一系列兼容性處理。但他有一些局限性，主要的局限性是它的可擴展性較差。一個栗子：當我們想對某一元素進行拖拽時，會發現很難用 iscroll。而產生這一問題的主要原因時：iscroll 的 scroll 等監聽事件是在元素移動時才會觸發。也就說 iscroll 沒有暴露出觸控 api 給用戶使用。