iScroll框架解析官方系統(tǒng)中文翻譯

1、分區(qū)分區(qū)JS的第 頁(yè)2012年9月12日9:37iScrolIjsQ勺用;去概要iScroll4這個(gè)版本完全重寫了iScroll這個(gè)框架的原始代碼。這個(gè)項(xiàng)目的產(chǎn)生完全是因?yàn)橐苿?dòng)版webkit瀏覽器（諸如iPhone,iPad,Android這些系統(tǒng)上廣泛使用）提供了一種本地化的方式來(lái)對(duì)一個(gè)限定了高度和寬度的元素的內(nèi)容進(jìn)行滑動(dòng)。很不幸的是，這種情況卞所右的web應(yīng)用的頁(yè)而就不能夠包含具有positioniabsolute的頭、頁(yè)尾或者是一個(gè)內(nèi)容可滾動(dòng)的中間區(qū)域。然而，Android系統(tǒng)最新修訂版已經(jīng)可以支持這種功能了（盡管支持的力度還不是特別好），Apple公司似乎不太情愿將oneJinger滑

2、動(dòng)事件運(yùn)用到div元素上。除了以前版本的iScroll的特性以外，iScroll4還包括如下的特性：（1）縮放（Pinch/Zoom）（2）拉動(dòng)刷新（Pullup/downtorefresh）（3）速度和性能提升（4）精確捕捉元素（5）自定義滾動(dòng)條友情提示:iScroll4并不是iScroll3的簡(jiǎn)易替代版本，API文檔已經(jīng)不一樣了。同時(shí)考慮到此版本正處于測(cè)試期，一些API可能會(huì)有細(xì)微的變化。使用指南在此文檔中你會(huì)發(fā)現(xiàn)很多例子來(lái)教會(huì)你如何快速上手iScroll腳本庫(kù)。參看文中的demo小例子并仔細(xì)閱讀此文檔，可能有點(diǎn)小無(wú)聊，但是這篇文章中卻是iScroll這個(gè)腳本庫(kù)的精髓Z所在哦。iScrol

3、l需要對(duì)所要進(jìn)行滾動(dòng)的元素進(jìn)行初始化，并且不限定一個(gè)頁(yè)而中使用（Scroll的元素的個(gè)數(shù)（這里不考慮您的硬件配置o滾動(dòng)元素中內(nèi)容的類型和長(zhǎng)度在一定程度上將會(huì)影響iScroll腳本庫(kù)里可以同時(shí)使用的元素的個(gè)數(shù)。使用iScroll這個(gè)腳本庫(kù)時(shí)，DOM樹(shù)的結(jié)構(gòu)要足夠簡(jiǎn)單，移除不必要的標(biāo)簽，盡呈避免過(guò)多的標(biāo)簽嵌套使用。最優(yōu)的使用iScroll的結(jié)構(gòu)如下所示:divid二”wrapper”在這個(gè)小例子中，ul標(biāo)簽將會(huì)被滾動(dòng)oiScroll-定要與滾動(dòng)內(nèi)容外而的wrapper進(jìn)行聯(lián)系才會(huì)產(chǎn)生效果?！咀⒁馐马?xiàng)】:只右wrapper里的第一個(gè)子元素才可以滾動(dòng)，如果你想要更多的元素可以滾動(dòng)，那么你可以試試下而的

4、這種寫法：divid二”wrapper”在這個(gè)例子中，scroller這個(gè)元素可以滾動(dòng)，即便它包含兩個(gè)ul元素iScroll必須在調(diào)用Z前實(shí)例化，你可以在下面幾種情況卜對(duì)iScroll進(jìn)行實(shí)例化:onDOMContentLoadedonLoad以內(nèi)聯(lián)inline方式卞面我們逐個(gè)來(lái)講講這三種用法的優(yōu)缺點(diǎn)ONDOMContentLoaded適用于滾動(dòng)內(nèi)容只包含文字、圖片，并且所有的圖片都有固定的尺寸使用方法：(在head標(biāo)簽中添加如下代碼)varmyscroll;functionloaded()myscrolknewiScrolKwrapper*);window.addEventListener(

5、,DOMContentLoaded,loaded,false);注意：myscroll這個(gè)變量是全局的，因此你可以在任何地方調(diào)用它的函數(shù)onLoad有些時(shí)候在DOMContentLoaded的狀態(tài)卞就初始化iScroll其實(shí)是有點(diǎn)草率的，因此此時(shí)頁(yè)而的資源叮能還沒(méi)有全部加載完牛。如果你遇到了一些很怪異的行為可以試試下而的寫法：varmyscroll;functionloaded()setTimeout(function()myscroll二newiScroll(MwrapperM);，100)；window.addEventListenerCloadloadedJalse);這種情況下iScr

6、oll會(huì)在頁(yè)而資源(包括圖片)加載完畢100ms之后得到初始化，這應(yīng)該是一種比較安全的調(diào)用iScroll的方式。inline初始化這種情況會(huì)在頁(yè)而加載到j(luò)s的時(shí)候就進(jìn)行調(diào)用，此方法不推薦便用，但是很多javascript的大牛都在用這種方式，我又有什么理由不贊成呢？divid二”wrapper”varmyscrolknewiScroll(HwrapperM);不過(guò)建議你使用一些框架的ready方法來(lái)安全調(diào)用iScroll(比如jquery里的ready()。iScroll里傳遞的參數(shù)(Scroll里的第二個(gè)參數(shù)允許你自定義一些內(nèi)容，比如下面的這段代碼：varmyscroll=newiScoll

7、(”wrapper：hScrollba匚false,vScrollba匚false);第二個(gè)參數(shù)通常都是一個(gè)對(duì)象，像上而的這個(gè)例子里就設(shè)定了不顯示滾動(dòng)條。常用的參數(shù)如下：hScrollfalse禁止橫向滾動(dòng)true橫向滾動(dòng)默認(rèn)為truevScrollfalse精致垂直滾動(dòng)true垂直滾動(dòng)默認(rèn)為truehScrollbarfalsehScrollbarfalse隱藏水平方向上的滾動(dòng)條vScrollbarfalse隱藏垂直方向上的滾動(dòng)條fixedScrollbar在iOS系統(tǒng)上，當(dāng)元素拖動(dòng)超出了scroller的邊界時(shí)，滾動(dòng)條會(huì)收縮，設(shè)置為true可以禁止?jié)L動(dòng)條超岀scroller的可見(jiàn)區(qū)域。默認(rèn)

8、在Android上為true,iOS上為falsefadeScrollbarfalse指定在無(wú)漸隱效果時(shí)隱藏滾動(dòng)條hideScrollbar在沒(méi)何用戶交互時(shí)隱藏滾動(dòng)條默認(rèn)為truebounce啟用或禁用邊界的反彈，默認(rèn)為truemomentum啟用或禁用慣性，默認(rèn)為true,此參數(shù)在你想要保存資源的時(shí)候非常有用lockDirectionfalse取消拖動(dòng)方向的鎖定，true拖動(dòng)只能在一個(gè)方向上(up/down或者left/right)為了保持資源的完整性，建議去除滾動(dòng)條拉動(dòng)刷新(pulltorefresh)自從Twitter和一些Apple的本地化應(yīng)用出現(xiàn)了這個(gè)效果Z后，這個(gè)效果就變得非常流行

9、。你可以看看這兒先一睹為快。我最近把pulltorefresh*這個(gè)部分單分出來(lái)作為iScroll的一個(gè)額外插件。你可以點(diǎn)擊這兒看看pulltorefresh是如何工作滴。你只需要做的就是自定義pullDownAction()這個(gè)方法。你可能需要一個(gè)ajax來(lái)加載新的內(nèi)容，不過(guò)一旦DOM樹(shù)發(fā)生了變化要記得調(diào)用refresh這個(gè)方法來(lái)。需要記住的是在例子中我們加了1杪的延遲來(lái)模擬網(wǎng)絡(luò)的延遲效果。當(dāng)然，如果你不想使用這個(gè)延遲，那就把setTimeout方法去掉就行了?？s放(pinch/zoom)我們不得不面對(duì)一個(gè)事實(shí)，那就是光有滾動(dòng)其實(shí)沒(méi)什么新意的。這就是為什么在iScroll4這個(gè)版本里我們?cè)试S

10、你可以放大和縮小。想要這個(gè)功能，只需要設(shè)置放大的參數(shù)zoom為true即可實(shí)現(xiàn)利用手勢(shì)來(lái)放大和縮小。你可以看看這兒。雙擊放大和縮小的功能在iScroll4里也是得到支持的。要使用縮放功能，你至少需要如下配置：varmyScroll二newiScroll(Mwrapperzoom:true);如果你想對(duì)縮放功能進(jìn)行深度的自定義的話可以使用下面的一些選項(xiàng)：zoomMax指定允許放大的最大倍數(shù)，默認(rèn)為4【注意事項(xiàng)】：如果想要圖片縮放的效果很好的話要把他們放到硬件的合成層中。通俗點(diǎn)說(shuō)，就是在所有需要縮放的img元素上使ffl-webkit-transform:translate3d(0,0,0)來(lái)實(shí)現(xiàn)

11、，而且尤為重要的是，駛件的加速會(huì)占用大量資源，要謹(jǐn)慎使用，否則你的應(yīng)用可能就此崩潰。捕捉元素(snapandsnaptoelement)捕捉的功能會(huì)促使scroller去重新定義位置，這樣可以制作更加花哨的傳送帶效果。點(diǎn)擊這里有個(gè)小例子。默認(rèn)情況下，iScroll將scroller分成四分體，或者是相同大小的wrapper。iScroll4加入了這個(gè)屬性允許捕捉scroller里的任何元素，不考慮外部wrapper的大小。如果你想要實(shí)現(xiàn)這樣的傳送帶效果，我建議你使用quadrant分割。最佳的設(shè)置如下：varmyscrolknewiScroll(nwrappern,snap:true,mome

12、ntum:false,hScrollbar:false,vScrollbar:false);捕獲元素，可以通過(guò)傳遞一個(gè)字符串來(lái)作為查詢條件，如下：varmyscroll=newiScroll(”wrapper；snap:li,momentum:false,hScrollbar:false,vScrollbar:false);在這個(gè)例子scroller可以捕捉到滾動(dòng)區(qū)域中最左上角的li元素自定義滾動(dòng)條(customscrollbars)在iScroll4這個(gè)版本中，可以利用一系列的css來(lái)自定義滾動(dòng)條的呈現(xiàn)?？梢越o滾動(dòng)條添加一個(gè)class參數(shù)，如下：varmyscroll=newiScroll(

13、MwrapperM,scrollbarClass:myScrollbarM);你可以點(diǎn)擊這里看一個(gè)小例子，在這個(gè)小例子里，myScrollbarH這個(gè)類被添加到了水平滾動(dòng)條上，myScrollbarV這個(gè)類則被添加給了垂直方向上的滾動(dòng)條上了。需要提醒的是，滾動(dòng)條是由兩個(gè)元素組合而成的：容器和顯示器。容器同wrapper的高度相同，而顯示器則代表的是滾動(dòng)條本身。滾動(dòng)條的HTML結(jié)構(gòu)如下：divclasshmyScrollbaiV、myscrollbarVposition:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;.my

14、ScrollbarVdivposition:absolute;乙index:100;width:100%;/*Thefollowingisprobablywhatyouwanttocustomize*/background:-webkit-gradient(linear,00,100%0,from(#f00),to(#900);border:1pxsolid#800;-webkit-background-clip:paddingbox;-webkit-box-sizing:border-box;-webkit-border-radius:4px;-webkit-box-shadowinset1px1px0rgba(255,255,255,0.5);通用方法：refresh在DOM樹(shù)發(fā)生變