摘要：處理函數(shù)處理函數(shù)都是和檢測事件對應(yīng)的，每一類檢測事件都有相應(yīng)的處理函數(shù)。為時，會將等事件綁定到的對象。可通過對進(jìn)行銷毀。注冊事件，可注冊的函數(shù)類型為下一小節(jié)函數(shù)。

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

仔細(xì)想想，如果我們要實(shí)現(xiàn)類似功能的觸控庫，我們會怎么做？正常思路大概就是：

檢測 ->  處理數(shù)據(jù) -> 產(chǎn)生位移

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

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

檢測

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

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

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

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

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

處理函數(shù)
處理函數(shù)都是和檢測事件對應(yīng)的，每一類檢測事件都有相應(yīng)的處理函數(shù)。如：

_start(e) 函數(shù)對應(yīng) start 類型事件。

_move(e) 函數(shù)對應(yīng) move 類型事件。

_end(e) 函數(shù)對應(yīng) end 類型事件。

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

運(yùn)動函數(shù)
處理函數(shù)處理好相應(yīng)數(shù)據(jù)和邏輯之后，會在處理函數(shù)中調(diào)用運(yùn)動相關(guān)的函數(shù)。而運(yùn)動相關(guān)的函數(shù)主要做一些位移變換，iscroll 對這些位移變換做了很多兼容性的處理。

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

_animate(destX, destY, duration, easingFn) 是帶 "transtion" 效果的運(yùn)動函數(shù)，當(dāng)不支持或關(guān)閉 transtion 調(diào)用該函數(shù)。此函數(shù)基于 requestAnimationFrame 做位置移動。

除了這兩個內(nèi)部運(yùn)動函數(shù)之外，iscroll 還提供了 scrollBy，scrollTo，scrollToElement，goToPage，next，prev 等一系列的 API 供外部調(diào)用。

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

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

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

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

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

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

eventPassthrough：默認(rèn)為 undefine,為 true 時，關(guān)閉默認(rèn)方向滾動（scrollY）。

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

preventDefault：默認(rèn)為 true，在各個運(yùn)動函數(shù)中和其他值配合使用。eventPassthrough 為 true 時，設(shè)置為 false.

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

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

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

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

resizePolling：默認(rèn)值 60ms，控制下拉刷新時間。

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

momentum：默認(rèn)為 true，運(yùn)動的物理引擎，對性能有影響，可關(guān)閉。

snap：默認(rèn)為 undefine，設(shè)置為 true 后，可按一定步長移動。

snapSpeed：默認(rèn)為 300ms，transitionTime 的時間。

snapStepX,snapStepY：默認(rèn)為 iscroll 的高度或?qū)挾龋稍O(shè)為某一數(shù)字，按照相應(yīng)距離移動。

snapThreshold：默認(rèn)為0.334，移動到下一步長的閥值系數(shù)，此值乘對應(yīng)頁的寬或高。

bounce：默認(rèn)true，是否開啟彈動效果。

bounceEasing：默認(rèn)為 circular，彈動效果。

bounceTime：默認(rèn)600ms, 彈動事件

disableMouse,disablePointer,disableTouch：默認(rèn)為 undefine, 設(shè)為 true 時，初始化時會不注冊相應(yīng)事件，達(dá)到不響應(yīng)的效果。

mouseWheel：默認(rèn)為 undefine，設(shè)置為 true 后，開啟滑輪。

mouseWheelSpeed：默認(rèn)為 20ms。

invertWheelDirection：滾動輪方向，無特殊情況不用關(guān)注。

keyBindings 默認(rèn)為鍵值對，可設(shè)置{down: 40}，對應(yīng)的向下鍵，向下移動。

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

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

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

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 有很多優(yōu)點(diǎn)，最主要的是相對穩(wěn)定，還有一系列兼容性處理。但他有一些局限性，主要的局限性是它的可擴(kuò)展性較差。一個栗子：當(dāng)我們想對某一元素進(jìn)行拖拽時，會發(fā)現(xiàn)很難用 iscroll。而產(chǎn)生這一問題的主要原因時：iscroll 的 scroll 等監(jiān)聽事件是在元素移動時才會觸發(fā)。也就說 iscroll 沒有暴露出觸控 api 給用戶使用。