12移動web視頻6天課程iscrollapi

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

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

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

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

5、第一個參數(shù)可以是滾動容器元素的DOM 選擇器字符串，也可以是滾動容器元素的對象。下面是一個有效的語法：var myScroll = new IScroll(#wrapper);最基本的初始化的方式如下：如果你有一個復雜的DOM 結(jié)構(gòu)，最好在onload 事件之后適當?shù)难舆t，再去初始化iScroll。最好給瀏覽器在iScroll 初始化階段可以通過構(gòu)造函數(shù)的第二個參數(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ù)來進行滾動。通常不需要你來配置引擎，iScroll 會為你選擇最佳的方式。盡管如此，理解iScroll 工作機制和了解如何去配置他們也是很重要的。options.useTransform默認情況下引擎會使用CSStransform 屬性。如果現(xiàn)在還是 2007 年，那么可以設(shè)置這個屬性為false，這就是說：引擎將使用top/left 屬性來進行滾動。這個屬性在滾動器感知到Flash，iframe 或者插件內(nèi)容時會有用，但是需要注意

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

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

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

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

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

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

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

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

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

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

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

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

19、條樣式，而且你認為你可以做的更好，你可以自定義滾動條樣式。第一步就是設(shè)置選項scrollbars 的值為custom：indicators: options.indicators.el這是一個強制性的參數(shù)，它保留了指向滾動條容器元素的。容器里的第一個子元素就是指示器。有效的語法如下：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)于滾動條的選項實際上是包裝了一個底層的選項indicators。它看起來或多或少像這樣：如果你設(shè)置resizeScrollbars: false，滾動條將是固定大小，否則它將基于滾動區(qū)域的尺寸變化。指示el:.geementById(indicator)更簡單的方式：indicators: el: #indicator注意，滾動條可以在你的文檔的任意地方，它不需要在滾動條包裝器內(nèi)。options.indicators.ignoreBoundaries這個屬性是告訴

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

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

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

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

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

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

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

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

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

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

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

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

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

34、/速度。更高的數(shù)字使動畫更短。你可以從 0.01 開始去體驗，這個值和基本的值比較，基本上沒有動能。默認值：0.0006options.mouseWheelSpeed設(shè)置鼠標滾輪滾動的速度值。默認值：20options.preventDefaultException調(diào)用preventDefault()方法時所有的異常將被觸發(fā)，盡管 preventDefault 設(shè)置了值。這是一個強大的選項，如果你想為所有包含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，在用戶觸摸屏幕但還沒有開始滾動時觸發(fā)。scrollCancel，滾動初始化完成，但沒有執(zhí)行。上面的代碼會在每次滾動停止是執(zhí)行doSomething 方法?？梢話炜康氖录缦拢哼@里調(diào)用refresh()使用了零秒等待，如果你需要立即刷新iScroll 邊界就是如此使用。當然還有其他方法可以等待頁面重繪，但零超時方式相當穩(wěn)定。如果你有一個相當復雜的HTML 結(jié)構(gòu)，你應(yīng)該給瀏覽器的執(zhí)行事件，可以設(shè)置 100 到 200 毫秒的超時時間。這通常適用于所有任務(wù)必須在DOM 上進行。通常給渲染器一些執(zhí)行的時間。自定義事件keyBindings: pageUp: 33,pageDown: 34,end: 35,你可以激活keyBindings 選項來支持鍵盤控制。默認情況下iScrol