摘要：處理函數(shù)處理函數(shù)都是和檢測(cè)事件對(duì)應(yīng)的，每一類(lèi)檢測(cè)事件都有相應(yīng)的處理函數(shù)。為時(shí)，會(huì)將等事件綁定到的對(duì)象?？赏ㄟ^(guò)對(duì)進(jìn)行銷(xiāo)毀。注冊(cè)事件，可注冊(cè)的函數(shù)類(lèi)型為下一小節(jié)函數(shù)。

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

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

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

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

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

檢測(cè)

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

start 類(lèi)型事件，如：touchstart，pointerdown，MSPointerDown，mousedown.

move 類(lèi)型事件，如：touchmove，pointermove，MSPointerMove，mousemove。

end 類(lèi)型事件，如：touchend，pointerup，touchcancel等。

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

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

_start(e) 函數(shù)對(duì)應(yīng) start 類(lèi)型事件。

_move(e) 函數(shù)對(duì)應(yīng) move 類(lèi)型事件。

_end(e) 函數(shù)對(duì)應(yīng) end 類(lèi)型事件。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

scrollY,scrollX:，初始值為 y 軸方向滾動(dòng)，即 scrollY 為 true.

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

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

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

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

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

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

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

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

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

bounce：默認(rèn)true，是否開(kāi)啟彈動(dòng)效果。

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

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

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

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

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

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

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

destroy()： destory只會(huì)銷(xiāo)毀所有綁定事件，并不會(huì)銷(xiāo)毀 iscroll?？赏ㄟ^(guò) iscroll = null 對(duì) iscroll進(jìn)行銷(xiāo)毀。此函數(shù)還會(huì)觸發(fā) destory 事件。

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

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

off(type, fn)：銷(xiāo)毀事件。
resetPosition(time)：重置到初始位置。time 為 動(dòng)效時(shí)間。

disable()：靜止滑動(dòng)

enable ()：可滑動(dòng)。

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

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

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

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

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

next()：滾動(dòng)到下一頁(yè)，snap 中使用。

prev()：滾動(dòng)到上一頁(yè)，snap 中使用。

beforeScrollStart

scrollStart

scrollCancel

scroll

scrollEnd

destroy

refresh

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