12移動(dòng)web視頻6天課程iscrollapi

1、iScroll 作用于滾動(dòng)區(qū)域的外層。在上面的例子中，UL 元素能進(jìn)行滾動(dòng)。只有容器元素的第一個(gè)子元素能進(jìn)行滾動(dòng)，其他子元素完全被忽略。.IScroll 是一個(gè)類，每個(gè)需要使用滾動(dòng)功能的區(qū)域均要進(jìn)行初始化。每個(gè)頁(yè)面上的 iScroll 實(shí)例數(shù)目在設(shè)備的CPU 和內(nèi)存能承受的范圍內(nèi)是沒有限制的。盡可能保持DOM 結(jié)構(gòu)的簡(jiǎn)潔。iScroll 使用硬件層但是有一個(gè)限制硬件可以處理的元素。最佳的HTML 結(jié)構(gòu)如下：入門iscroll.js，這個(gè)版本是常規(guī)應(yīng)用的。它包含大多數(shù)常用的功能，有很高的性能和很小的體積。iscroll-lite.js，精簡(jiǎn)版本。它不支持快速跳躍，滾動(dòng)條，鼠標(biāo)滾輪，快捷鍵綁定。但

2、如果你所需要的是滾動(dòng)(特別是在移動(dòng)) iScroll 精簡(jiǎn)版 是又小又快的解決方案。iscroll-probe.js，探查當(dāng)前滾動(dòng)位置是一個(gè)要求很高的任務(wù),這就是為什么我決定建立一個(gè)專門的版本。如果你需要知道滾動(dòng)位置在任何給定的時(shí)間,這是iScroll 給你的。（我正在做的測(cè)試,這可能最終在常規(guī)iscroll.js，請(qǐng)留意）。iscroll-zoom.js，在標(biāo)準(zhǔn)滾動(dòng)功能上增加縮放功能。iscroll-infinite.js，可以做無(wú)限緩存的滾動(dòng)。處理很長(zhǎng)的列表的元素為移動(dòng)設(shè)備并非易事。 iScroll infinite 版本使用緩存機(jī)制,允許你滾動(dòng)一個(gè)潛在的無(wú)限數(shù)量的元素。版本針對(duì)iScro

3、ll 的優(yōu)化。為了達(dá)到更高的性能，iScroll 分為了多個(gè)版本。你可以選擇最適合你的版本。目前有以下版本：.當(dāng)DOM 準(zhǔn)備完成后iScroll 需要被初始化。最保險(xiǎn)的方式是在window 的onload 事件中啟動(dòng)它。在 DOMContentLoaded 事件中或者 inline initialization 中做也可以，需要記住的是需要知道滾動(dòng)區(qū)域的高度和寬度。如果你有一些在滾動(dòng)區(qū)域?qū)е虏荒芰ⅠR獲取區(qū)域的高度和寬度，iScroll的滾動(dòng)尺寸有可能會(huì)錯(cuò)誤。為滾動(dòng)起容器增加ition:relative 或者absolute 樣式。這將解決大多數(shù)滾動(dòng)器容器大小計(jì)算不正確。綜上所述，最小的iScr

4、oll 配置如下：注意，iScroll 使用的是querySelector 而不是 querySelectorAll，所以iScroll 只會(huì)作用到選擇器選中元素的第一個(gè)。如果你需要對(duì)多個(gè)對(duì)象使用iScroll，你需要構(gòu)建自己的循環(huán)機(jī)制。初始化var myScroll = new IScroll(.wrapper);所以基本上你要么直接傳遞元素，要么傳遞一個(gè)querySelector 字符串。因此可以使用css 名稱代替ID 去選擇一個(gè)滾動(dòng)器容器,如下:var wrapper =.geementById(wrapper);var myScroll = new IScroll(wrapper);

5、第一個(gè)參數(shù)可以是滾動(dòng)容器元素的DOM 選擇器字符串，也可以是滾動(dòng)容器元素的對(duì)象。下面是一個(gè)有效的語(yǔ)法：var myScroll = new IScroll(#wrapper);最基本的初始化的方式如下：如果你有一個(gè)復(fù)雜的DOM 結(jié)構(gòu)，最好在onload 事件之后適當(dāng)?shù)难舆t，再去初始化iScroll。最好給瀏覽器在iScroll 初始化階段可以通過構(gòu)造函數(shù)的第二個(gè)參數(shù)配置它。100 或者 200 毫秒的間隙再去初始化iScroll。配置 var myScroll;function loaded() myScroll = new IScroll(#wrapper);.var myScroll =

6、new IScroll(#wrapper, mouseWheel: true,scrollbars: true);iScroll 使用基于設(shè)備和瀏覽器性能的各種技術(shù)來進(jìn)行滾動(dòng)。通常不需要你來配置引擎，iScroll 會(huì)為你選擇最佳的方式。盡管如此，理解iScroll 工作機(jī)制和了解如何去配置他們也是很重要的。options.useTransform默認(rèn)情況下引擎會(huì)使用CSStransform 屬性。如果現(xiàn)在還是 2007 年，那么可以設(shè)置這個(gè)屬性為false，這就是說：引擎將使用top/left 屬性來進(jìn)行滾動(dòng)。這個(gè)屬性在滾動(dòng)器感知到Flash，iframe 或者插件內(nèi)容時(shí)會(huì)有用，但是需要注意

7、：性能會(huì)有極大的損耗。默認(rèn)值：trueoptions.useTransitioniScroll 使用CSS transition 來實(shí)現(xiàn)動(dòng)畫效果（動(dòng)量和彈力）。如果設(shè)置為false，那么將使用 requestAnimationFrame 代替。在現(xiàn)在瀏覽器中這兩者之間的差異并不明顯。在老的設(shè)備上transitions 執(zhí)行得更好。默認(rèn)值：trueiting上面的例子示例了在iScroll 初始化時(shí)開啟鼠標(biāo)滾輪支持和滾動(dòng)條支持。在初始化后你可以通過options 對(duì)象標(biāo)準(zhǔn)化值。例如： js console.dir(myScroll.options);上面的語(yǔ)句將返回myScroll 實(shí)例的配置信

8、息。所謂的標(biāo)準(zhǔn)化意味著如果你設(shè)置useTransform:true，但是瀏覽器并不支持CSStransforms，那么useTransform 屬性值將為false。理解var myScroll = new IScroll(#wrapper, disableMouse: true,options.bounce當(dāng)滾動(dòng)器到達(dá)容器邊界時(shí)他將執(zhí)行一個(gè)小反彈動(dòng)畫。在老的或者性能低的設(shè)備上禁用反彈對(duì)實(shí)現(xiàn)平滑的滾動(dòng)有幫助。默認(rèn)值：trueoptions.click為了重寫原生滾動(dòng)條，iScroll了一些默認(rèn)的瀏覽器行為，比如鼠標(biāo)的點(diǎn)擊。如果你想你的應(yīng)用程序響應(yīng)click 事件，那么該設(shè)置次屬性為true。請(qǐng)

9、注意，建議使用自定義的tap 事件來代替它（見下面）。 默認(rèn)屬性：falseoptions.disableMouse options.disablePo er options.disableTouch默認(rèn)情況下，iScroll 所有的指針事件，并且對(duì)這些事件中第一個(gè)被觸發(fā)的做出反應(yīng)。這看上去是浪費(fèi)資源，但是在大量的瀏覽器/設(shè)備上兼容，特定的事件偵測(cè)證明是無(wú)效的，所以 listen-to-all 是一個(gè)安全的做法。如果你有一種設(shè)備偵測(cè)的機(jī)制，或者你知道你的將在什么地方運(yùn)行，你可以不需要的事件禁用（鼠標(biāo)，指針或者觸摸事件）。下面的例子是禁用鼠標(biāo)和指針事件：這個(gè)選項(xiàng)嘗試使用translateZ(0)

10、來把滾動(dòng)器附加到硬件層，以此來改變 CSS 屬性。在移動(dòng)設(shè)備上這將提高性能，但在有些情況下,你可能想要禁用它(特別是如果你有太多的元素和硬件性能跟不上)。默認(rèn)值：true如果不確定iScroll 的最優(yōu)配置。從性能角度出發(fā)，上面的所有選項(xiàng)應(yīng)該設(shè)置為true。（或者更好的方式，讓他們自動(dòng)設(shè)置屬性為true）。你可以嘗試這配置他們，但是要內(nèi)存泄漏?；竟δ苣J(rèn)值：falseoptions.eventPassthrough有些時(shí)候你想保留原生縱向的滾動(dòng)條但想為橫向滾動(dòng)條增加iScroll 功能（比如走馬燈）。設(shè)置這個(gè)屬性為true 并且iScroll 區(qū)域只將影響橫向滾動(dòng)，縱向滾動(dòng)將滾動(dòng)整個(gè)頁(yè)面。在

11、移動(dòng)設(shè)備 問event passthrough demo。注意，這個(gè)值也可以設(shè)置為horizontal，其作用和上面介紹的相反（橫向滾動(dòng)條保持原生，縱向滾動(dòng)條使用iScroll）。options.freeScroll此屬性針對(duì)于兩個(gè)兩個(gè)緯度的滾動(dòng)條（當(dāng)你需要橫向和縱向滾動(dòng)條）。通常情況下你開始滾動(dòng)一個(gè)方向上的滾動(dòng)條，另外一個(gè)方向上會(huì)被鎖定不動(dòng)。有些時(shí)候，你需要無(wú)約束的移動(dòng)（橫向和縱向可以同時(shí)響應(yīng)），在這樣的情況下此屬性需要設(shè)置為true。請(qǐng)參考 2D scroll demo。默認(rèn)值：falseoptions.keyBindings此屬性為true 時(shí)激活鍵盤（和控制）綁定。請(qǐng)參考下面的Key

12、bindings 內(nèi)容。默認(rèn)值：falseoptions.invertWheelDirection當(dāng)鼠標(biāo)滾輪支持激活后，在有些情況下需要反轉(zhuǎn)滾動(dòng)的方向。（比如，鼠標(biāo)滾輪向下滾動(dòng)條向上，反之亦然）。默認(rèn)值：falseoptions.momentum在用戶快速觸摸屏幕時(shí)，你可以開/關(guān)勢(shì)能動(dòng)畫。關(guān)閉此功能將大幅度性能。默認(rèn)值：trueoptions.mouseWheel偵聽鼠標(biāo)滾輪事件。默認(rèn)值：falsedisablePoer: true);options.preventDefault當(dāng)事件觸發(fā)時(shí)師傅執(zhí)行 preventDefault()。此屬性應(yīng)該設(shè)置為 true，除非你真的知道你需要怎么做。請(qǐng)參

13、考下面的Advanced features 中的preventDefaultException，可以獲取preventDefault 行為的信息。默認(rèn)值：true控制options.scrollbars是否顯示為默認(rèn)的滾動(dòng)條。信息請(qǐng)查看Scrollbar默認(rèn)值：falseoptions.scrollXoptions.scrollY默認(rèn)情況下只有縱向滾動(dòng)條可以使用。如果你需要使用橫向滾動(dòng)條，需要將 scrollX 屬性值設(shè)置為 true。請(qǐng)參考示例 horizontal demo。也可以參考 freeScroll 選項(xiàng)。默認(rèn)值：scrollX: false，scrollY: true注意屬性 s

14、crollX/Y: true 與overflow: auto 有相同的效果。設(shè)置一個(gè)方向上的值為 false 可以節(jié)省一些檢測(cè)的時(shí)間和 CPU 的計(jì)算周期。options.startXoptions.startY默認(rèn)情況下 iScroll 從 0, 0 (top left)位置開始，通過此屬性可以讓滾動(dòng)條從不同的位置開始滾動(dòng)。默認(rèn)值：0options.tap設(shè)置此屬性為true，當(dāng)滾動(dòng)區(qū)域被點(diǎn)擊或者觸摸但并沒有滾動(dòng)時(shí)，可以讓 iScroll 拋出一個(gè)自定義的 tap事件。這是處理與可以點(diǎn)擊元間的用戶交互的建議方式。偵聽tap 事件和偵聽標(biāo)準(zhǔn)事件的方式一致。示例如下：element.addEve

15、ntListener(tap, doSomething, false); Native$(#element).on(tap, doSomething); jQuery你可以通過傳遞一個(gè)字符串來自定義事件名稱。比如：tap: myCustomTvent滾動(dòng)條不只是像名字所表達(dá)的意義一樣，在它們是作為indicators 的。一個(gè)指示器偵聽滾動(dòng)條的位置并且現(xiàn)實(shí)它在全局中的位置，但是它可以做的事情。先從最基本的開始。options.scrollbars正如在基本功能介紹中提到的，激活滾動(dòng)條只需要做一件事情，這件事情就是：var myScroll = new IScroll(#wrapper, scr

16、ollbars: true);當(dāng)然這個(gè)默認(rèn)的行為是可以定制的。options.fadeScrollbars不想使用滾動(dòng)條淡入淡出方式時(shí)，需要設(shè)置此屬性為false 以便節(jié)省資源。默認(rèn)值：falseoptions.eractiveScrollbars此屬性可以讓滾動(dòng)條能拖動(dòng)，用戶可以與之交互。默認(rèn)值：false在這個(gè)示例里你應(yīng)該偵聽名為myCustomTvent 的事件。默認(rèn)值：false滾動(dòng)條自定義滾動(dòng)條樣式示例。.iScrollHorizontalScrollbar，這個(gè)樣式應(yīng)用到橫向滾動(dòng)條的容器。這個(gè)元素實(shí)際上承載了滾動(dòng)條指示器。.iScrollVerticalScrollbar，和上面的

17、樣式類似，只不過適用于縱向滾動(dòng)條容器。.iScrollIndicator，真正的滾動(dòng)條指示器。.iScrollBothScrollbars，這個(gè)樣式將在雙向滾動(dòng)條顯示的情況下被加載到容器元素上。通常情況下其中一個(gè)（橫向或者縱向）是可見的使用下面的CSS 類可以簡(jiǎn)單的改變滾動(dòng)條樣式。var myScroll = new IScroll(#wrapper, scrollbars: custom);options.resizeScrollbars滾動(dòng)條尺寸改變基于容器和滾動(dòng)區(qū)域的寬/高之間的比例。此屬性設(shè)置為false 讓滾動(dòng)條固定大小。這可能有助于自定義滾動(dòng)條樣式（參考下面的滾動(dòng)條樣式）。默認(rèn)值：

18、trueoptions.shrinkScrollbars當(dāng)在滾動(dòng)區(qū)域外面滾動(dòng)時(shí)滾動(dòng)條是否可以收縮到較小的尺寸。有效的值為：clip 和 scale。clip 是移動(dòng)指示器到它容器的外面，效果就是滾動(dòng)條收縮起來，簡(jiǎn)單的移動(dòng)到屏幕以外的區(qū)域。屬性設(shè)置為此值后將大大的整個(gè)iScroll 的性能。scale 是關(guān)閉屬性u(píng)seTransition，之后所有的動(dòng)畫效果將使用requestAnimationFrame 實(shí)現(xiàn)。指示器實(shí)際上有各種尺寸，并且最終的效果最好。默認(rèn)值：false注意改變大小不是在GPU 上執(zhí)行的，所以scale 是在CPU 上執(zhí)行。請(qǐng)參考 滾動(dòng)條示例。滾動(dòng)條樣式如果你不喜歡默認(rèn)的滾動(dòng)

19、條樣式，而且你認(rèn)為你可以做的更好，你可以自定義滾動(dòng)條樣式。第一步就是設(shè)置選項(xiàng)scrollbars 的值為custom：indicators: options.indicators.el這是一個(gè)強(qiáng)制性的參數(shù)，它保留了指向滾動(dòng)條容器元素的。容器里的第一個(gè)子元素就是指示器。有效的語(yǔ)法如下：var myScroll = new IScroll(#wrapper, indicators: el: elemenement selector fade: false, ignoreBoundaries: false,eractive: false, listenX: true, listenY: true,

20、resize: true, shrink: false, speedRatioX: 0,speedRatioY: 0,);上面所有關(guān)于滾動(dòng)條的選項(xiàng)實(shí)際上是包裝了一個(gè)底層的選項(xiàng)indicators。它看起來或多或少像這樣：如果你設(shè)置resizeScrollbars: false，滾動(dòng)條將是固定大小，否則它將基于滾動(dòng)區(qū)域的尺寸變化。指示el:.geementById(indicator)更簡(jiǎn)單的方式：indicators: el: #indicator注意，滾動(dòng)條可以在你的文檔的任意地方，它不需要在滾動(dòng)條包裝器內(nèi)。options.indicators.ignoreBoundaries這個(gè)屬性是告訴

21、指示器忽略它容器所帶來的邊界。當(dāng) 能改變滾動(dòng)條速度的比率，在讓滾動(dòng)條滾動(dòng)時(shí)這個(gè)屬性很有用。比如你想讓指示器是滾動(dòng)條速度的兩倍，指示器將很快到達(dá)它的結(jié)尾。這個(gè)屬性被用在視差滾動(dòng)。默認(rèn)值：falseoptions.indicators.listenX options.indicators.listenY指示器的那一個(gè)軸（橫向和縱向）被偵聽?？梢栽O(shè)置一個(gè)或者都設(shè)置默認(rèn)值：trueoptions.indicators.speedRatioX options.indicators.speedRatioY指示器移動(dòng)的速度和主要滾動(dòng)條大小的關(guān)系。默認(rèn)情況下是設(shè)置為自動(dòng)。你很少需要去改變這個(gè)值。默認(rèn)值：0op

22、tions.indicators.fade options.indicators.eractive options.indicators.resizeoptions.indicators.shrink上面這個(gè)語(yǔ)句將在當(dāng)前位置向下滾動(dòng) 10 個(gè)像素。如果你當(dāng)前所在位置為-100，那么滾動(dòng)結(jié)束后位置為-110.scrollToElemen, time, offsetX, offsetY, easing)myScroll.scrollBy(0, -10);擦除動(dòng)畫的類型選項(xiàng)有：quadratic, circular, back, bounce, elastic。scrollBy(x, y, time

23、, easing)和上面一個(gè)方法類似，但是可以傳遞X 和Y 的值從當(dāng)前位置進(jìn)行滾動(dòng)。myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);通過上面的方式將向下滾動(dòng) 100 個(gè)像素。記?。?是左上角。需要滾動(dòng)你必須傳遞負(fù)數(shù)。time 和 easing 是可選項(xiàng)。他們控制滾動(dòng)周期（毫秒級(jí)別）和動(dòng)畫的擦除效果。擦除功能是一個(gè)有效的IScroll.utils.ease 對(duì)象。例如應(yīng)用一個(gè)一秒的經(jīng)典擦除動(dòng)畫你應(yīng)該這么做：myScroll.scrollTo(0, -100);對(duì)應(yīng)存在的一個(gè)叫做myScroll 的iScroll 實(shí)例，可以

24、通過下面的方式滾動(dòng)到任意的位置：scrollTo(x, y, time, easing)這幾個(gè)選項(xiàng)和已經(jīng)介紹過的滾動(dòng)條中的一樣，在這里不重復(fù)介紹。請(qǐng)參考迷你地圖示例，你將體驗(yàn)indicators 選項(xiàng)的神奇力量。你應(yīng)該已經(jīng)注意到選項(xiàng) indicators 是復(fù)數(shù)，是的，實(shí)際上，傳遞一個(gè)對(duì)象數(shù)組你可以得到一個(gè)虛擬的無(wú)限大小的指示器。我不知道你是否需要，但是，這里我是想你介紹參數(shù)設(shè)置，所以要提及此。視差滾動(dòng)視差滾動(dòng)是指示器功能的一個(gè) 附屬功能指示器是一個(gè)遵循主滾動(dòng)條移動(dòng)和動(dòng)畫的層。如果你了解它你就會(huì)理解這個(gè)功能背后的力量。增加這個(gè)功能你就可以創(chuàng)建任意數(shù)量的指示器和視差滾動(dòng)。請(qǐng)參考 視差滾動(dòng)示例.滾

25、動(dòng)的編程接口當(dāng)然還可以通過編程來進(jìn)行滾動(dòng)。這個(gè)示例中滾動(dòng)條將會(huì)對(duì)齊到每一個(gè)LI 標(biāo)記的元素。下面將幫助你快速瀏覽iScroll 提供的關(guān)于對(duì)齊的一系列有趣的方法。goToPage(x, y, time, easing)x 和 y 呈現(xiàn)你想滾動(dòng)到橫向軸或者縱向軸的頁(yè)面數(shù)。如果你需要在單個(gè)唯獨(dú)上使用滾動(dòng)條，只需要為你不需要的軸向傳遞 0 值。var myScroll = new IScroll(#wrapper, snap: li);這將按照頁(yè)面容器的大小自動(dòng)分割滾動(dòng)條。snap 屬性也可以傳遞字符類型類型的值。這個(gè)值是滾動(dòng)條將要對(duì)齊到的元素的選擇器。比如下面：var myScroll = new

26、 IScroll(#wrapper, snap: true);iScroll 能對(duì)齊到固定的位置和元素。optionap最簡(jiǎn)單的對(duì)齊配置如下：這是一個(gè)很有用的方法，你會(huì)喜歡它的。在這個(gè)方法中只有一個(gè)強(qiáng)制的參數(shù)就是el。傳遞一個(gè)元素或者一個(gè)選擇器，iScroll 將嘗試滾動(dòng)到這個(gè)元素的左上角位置。time 是可選項(xiàng)，用于設(shè)置動(dòng)畫周期。offsetX 和 offsetY 定義像素級(jí)的偏移量，所以你可以滾動(dòng)到元素并且加上特別的偏移量。但并不僅限于此。如果把這兩個(gè)參數(shù)設(shè)置為true，元素將會(huì)位于屏幕的中間。請(qǐng)參考例子 滾動(dòng)到元素 exle。 easing 參數(shù)和scrollTo 方法里的一樣。對(duì)齊為了

27、使用縮放功能，你最好使用 iscroll-zoom.js。options.zoom此屬性設(shè)置為true 啟用縮放功能。默認(rèn)值：falseoptions.zoomMax最大縮放級(jí)數(shù)。默認(rèn)值：4options.zoomMin最小縮放級(jí)數(shù)。默認(rèn)值：1options.zoomStart初始的縮放級(jí)數(shù)。默認(rèn)值：1options.wheelAction上面這個(gè)例子將在一秒內(nèi)沿著橫向滾動(dòng)到第 10 頁(yè)。next()prev()滾動(dòng)到當(dāng)前位置的下一頁(yè)或者前一頁(yè)?？s放myScroll.goToPage(10, 0, 1000);time 屬性是動(dòng)畫周期，easing 屬性是滾動(dòng)到指定點(diǎn)使用的擦除功能類型。請(qǐng)參考

28、高級(jí)功能中的option.bounceEasing。這兩個(gè)屬性都是可選項(xiàng)。請(qǐng)參考 無(wú)限滾動(dòng)示例 并請(qǐng)?zhí)峤荒愕慕ㄗh和bug。iScroll 集成智能緩存系統(tǒng)，允許處理的使用(重用)一群元素幾乎無(wú)限數(shù)量的數(shù)據(jù)。無(wú)限滾動(dòng)開發(fā)的早期階段，盡管它可以被認(rèn)為是穩(wěn)定的，但它還沒有準(zhǔn)備好被廣泛使用?？s放功能使用的CSS 的轉(zhuǎn)換功能。iScroll 只能在支持此CSS 功能的瀏覽器上執(zhí)行。一些瀏覽器（特別是基于webkit 的）采取的快照縮放區(qū)域就放在硬件層(比如當(dāng)你申請(qǐng)轉(zhuǎn)換)。該快照作為紋理的縮放區(qū)域,它幾乎不能被更新。這意味著您的紋理將基于scale 1 進(jìn)行縮放,將導(dǎo)致文本和圖像模糊,清晰度低。一個(gè)簡(jiǎn)單的

29、解決方案是使用實(shí)際分辨率雙倍（或者三倍）裝載內(nèi)容，然后 放到一個(gè)按照scale(0.5)比例縮小的div 中。這種方法大多數(shù)情況下能適用。請(qǐng)參考 縮放示例。zoom(scale, x, y, time)一個(gè)有意思的的方法，能讓你進(jìn)行縮放編程。scale 是縮放因子。x 和 y 是縮放關(guān)注點(diǎn)，即縮放的中心。如果沒有指定，這個(gè)中心就是屏幕中心。time 是毫秒級(jí)別的動(dòng)畫周期（可選項(xiàng)）。無(wú)限滾動(dòng)myScroll = new IScroll(#wrapper, zoom: true,mouseWheel: true, wheelAction: zoom);鼠標(biāo)滾輪的動(dòng)作可以設(shè)置為zoom，這樣在滾動(dòng)滾

30、輪時(shí)縮放操作會(huì)代替原來的滾動(dòng)操作。默認(rèn)值：undefined（即：鼠標(biāo)滾輪滾動(dòng)）和前面的示例一樣，一個(gè)好的縮放功能的配置如下：上面這個(gè)示例將執(zhí)行一個(gè)線性的擦出。style 選項(xiàng)將在在每次動(dòng)畫執(zhí)行時(shí)使用CSS 轉(zhuǎn)場(chǎng)執(zhí)行。fn 和requestAnimationFrame 一起使用。如果一個(gè)擦出功能太復(fù)雜，不能由一個(gè)三次曲線展現(xiàn)，那么為style 屬性傳遞 （空字符串）。默認(rèn)值：circular注意：bounce 和 elastic 這兩種方式不能被CSS 轉(zhuǎn)場(chǎng)執(zhí)行。options.bounceTime彈跳動(dòng)畫的持續(xù)時(shí)間，使用毫秒級(jí)。默認(rèn)值：600options.decelerationbounc

31、eEasing: style: cubic-bezier(0,0,1,1), fn: function (k) return k; 下面這些選項(xiàng)主要針對(duì) 開發(fā) 。options.bindToWrappermove 事件通常綁定到文檔而不是滾動(dòng)器容器（wrapper）。當(dāng)你在滾動(dòng)器容器（wrapper）外移動(dòng)光標(biāo)/手指，滾動(dòng)條將不斷滾動(dòng)。這通常是你想要的,但是你也可以綁定事件轉(zhuǎn)移到滾動(dòng)器容器（wrapper）本身。這樣做一旦指針離開了容器，滾動(dòng)就會(huì)停止。默認(rèn)值：falseoptions.bounceEasing擦除功能在彈跳動(dòng)畫過程中執(zhí)行。有效的值為：quadratic, circular, b

32、ack, bounce, elastic. 參見bounce easing demo，往下拽滾動(dòng)條然后。bounceEasing 比上面的示例更強(qiáng)大。你可以自定義一個(gè)消除的方式，比如：高級(jí)選項(xiàng)ajax(page.,pletion);iScroll 需要知道包裝器和滾動(dòng)器確切的尺寸，在 iScroll 初始化的時(shí)候進(jìn)行計(jì)算，如果元素大小發(fā)生了變化，需要告訴iScroll DOM 發(fā)生了變化。下面將提供調(diào)用refresh 方法的正確時(shí)機(jī)。每次觸摸DOM，瀏覽器渲染器重繪頁(yè)面。一旦發(fā)生了重畫可以安全地讀新的DOM 屬性。重新繪制階段不是瞬時(shí)發(fā)生的只是范圍結(jié)束時(shí)觸發(fā)。這就是為什么需要給渲染器刷新iSc

33、roll 之前一點(diǎn)時(shí)間。為了確保javascript 得到更新后的屬性，應(yīng)該像下面的例子這樣使用刷新方法：默認(rèn)值： tagName: /(INPUT|TEXTAREA|BUTTON|SELECT)$/ .options.resizePolling當(dāng)你改變窗口的大小iScroll 重新計(jì)算元素的位置和尺寸。這可能是一個(gè)相當(dāng)艱巨的任務(wù)。輪詢?cè)O(shè)置為 60毫秒。通過降低這個(gè)值你獲得更好的視覺效果，但會(huì)占用的CPU 資源。默認(rèn)值是一個(gè)很好的折中。默認(rèn)值：60刷新preventDefaultException: claame: /(|s)formfield(s|$)/ 這個(gè)值可以改變改變動(dòng)畫的勢(shì)頭持續(xù)時(shí)間

34、/速度。更高的數(shù)字使動(dòng)畫更短。你可以從 0.01 開始去體驗(yàn)，這個(gè)值和基本的值比較，基本上沒有動(dòng)能。默認(rèn)值：0.0006options.mouseWheelSpeed設(shè)置鼠標(biāo)滾輪滾動(dòng)的速度值。默認(rèn)值：20options.preventDefaultException調(diào)用preventDefault()方法時(shí)所有的異常將被觸發(fā)，盡管 preventDefault 設(shè)置了值。這是一個(gè)強(qiáng)大的選項(xiàng)，如果你想為所有包含formfield 樣式名稱的元素上應(yīng)用preventDefault()方法，你可以設(shè)置為下面的值：functionpletion () / Update here your DOMset

35、Timeout(function () myScroll.refresh();, 0);Custom eventsiScroll 還提供額一些你可以掛靠的有用的自定義事件。使用on(type, fn)方法事件。myScroll = new IScroll(#wrapper);myScroll.on(scrollEnd, doSomething);beforeScrollStart，在用戶觸摸屏幕但還沒有開始滾動(dòng)時(shí)觸發(fā)。scrollCancel，滾動(dòng)初始化完成，但沒有執(zhí)行。上面的代碼會(huì)在每次滾動(dòng)停止是執(zhí)行doSomething 方法?？梢話炜康氖录缦拢哼@里調(diào)用refresh()使用了零秒等待，如果你需要立即刷新iScroll 邊界就是如此使用。當(dāng)然還有其他方法可以等待頁(yè)面重繪，但零超時(shí)方式相當(dāng)穩(wěn)定。如果你有一個(gè)相當(dāng)復(fù)雜的HTML 結(jié)構(gòu)，你應(yīng)該給瀏覽器的執(zhí)行事件，可以設(shè)置 100 到 200 毫秒的超時(shí)時(shí)間。這通常適用于所有任務(wù)必須在DOM 上進(jìn)行。通常給渲染器一些執(zhí)行的時(shí)間。自定義事件keyBindings: pageUp: 33,pageDown: 34,end: 35,你可以激活keyBindings 選項(xiàng)來支持鍵盤控制。默認(rèn)情況下iScrol