iScroll.js外掛程式使用方法

標籤：支援   指南   sla   提升   back   測試   scrollto   arch   相容性   

iScroll.js 用法參考 （share）

分享是傳播、學習知識最好的方法

以下這篇文章是iScroll.js官網的中文翻譯，儘管自己英文不好，但覺得原作者們翻譯的這個資料還是可以的，基本用法介紹清楚了。如果你英文比較好的話，可以看看官網的資料。

參考：http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html  ，  http://www.nb88.net/Index/p/id/406

官網：http://cubiq.org/iscroll-4

 

概要

iScroll 4 這個版本完全重寫了iScroll這個架構的原始代碼。這個項目的產生完全是因為移動版webkit瀏覽器（諸如iPhone，iPad，Android 這些系統上廣泛使用）
提供了一種本地化的方式來對一個限定了高度和寬度的元素的內容進行滑動。很不幸的是，這種情況下所有的web應用的頁面就不能夠包含具有position:absolute的頭、頁尾或者是一個內容可滾動的
中間地區。
然而，Android系統最新修訂版已經可以支援這種功能了（儘管支援的力度還不是特別好），Apple公司似乎不太情願將one-finger滑動事件運用到div元素上。
除了以前版本的iScroll的特性以外，iScroll 4還包括如下的特性：
     （1）縮放（Pinch/Zoom）
    （2）拉動重新整理（Pull up/down to refresh）
    （3）速度和效能提升
    （4）精確捕捉元素
    （5）自訂捲軸
      友情提示：iScroll 4並不是iScroll 3的簡易替代版本，API文檔已經不一樣了。同時考慮到此版本正處於測試期，一些API可能會有細微的變化。

使用指南

在此文檔中你會發現很多例子來教會你如何快速上手iScroll指令碼庫。參看文中的demo小例子並仔細閱讀此文檔，可能有點小無聊，但是這篇文章中卻是iScroll這個指令碼庫的精髓之所在哦。
iScroll需要對所要進行滾動的元素進行初始化，並且不限定一個頁面中使用iScroll的元素的個數（這裡不考慮您的硬體設定）。滾動元素中內容的類型和長度在一定程度上將會影響iScroll指令碼庫裡
可以同時使用的元素的個數。
使用iScroll這個指令碼庫時，DOM樹的結構要足夠簡單，移除不必要的標籤，盡量避免過多的標籤嵌套使用。
最優的使用iScroll的結構如下所示：

<div id="wrapper">        <ul>               <li></li>               .....        </ul></div>

在這個小例子中，ul標籤將會被滾動。iScroll一定要與滾動內容外面的wrapper進行聯絡才會產生效果。
【注意事項】：
只有wrapper裡的第一個子項目才可以滾動，如果你想要更多的元素可以滾動，那麼你可以試試下面的這種寫法：

<div id="wrapper">        <div id="scroller">               <ul>                    <li></li>                     ...                </ul>                <ul>                     <li></li>                     ...                </ul>       </div></div>

在這個例子中，scroller這個元素可以滾動，即便它包含兩個ul元素

iScroll必須在調用之前執行個體化，你可以在下面幾種情況下對iScroll進行執行個體化：

　　（1）使用onDOMContentLoaded事件實現滾動

        適用於滾動內容只包含文字、圖片，並且所有的圖片都有固定的尺寸    

 <script src="iscroll.js"></script>        <script>                var myscroll;                function loaded(){                           myscroll=new iScroll("wrapper");                 }               window.addEventListener("DOMContentLoaded",loaded,false);         </script>

         注意：myscroll這個變數是全域的，因此你可以在任何地方調用它

 　　（2）使用onLoad事件實現滾動

        因為DOMContentLoaded事件是載入DOM結構後就會被調用，所以在圖片等元素未載入前可能無法確定捲動區域的長寬，此時可以使用onLoad事件來實現。
        

<script src="iscroll.js"><script>        <script>                    var myscroll;                    function loaded(){                   setTimeout(function(){                            myscroll=new iScroll("wrapper");                     }，100 );                }                window.addEventListener("load",loaded,false);         </script>

         這種情況下iScroll會在頁面資源（包括圖片）載入完畢100ms之後得到初始化，這應該是一種比較安全的調用iScroll的方式。

 　　（3）inline初始化

         這種情況會在頁面載入到js的時候就進行調用，此方法不推薦使用，但是很多javascript的大牛都在用這種方式，我又有什麼理由不贊成呢？         

<script src="iscroll.js"></script>                    <div id="wrapper">                            <ul>                                <li></li>                                 ...                          </ul>                  </div>        <script>                   var myscroll=new iScroll("wrapper");        </script>

        不過建議你使用一些架構的ready方法來安全調用iScroll（比如jquery裡的ready()）。

 iScroll裡傳遞的參數

　　iScroll裡的第二個參數允許你自訂一些內容，比如下面的這段代碼：      

　　　　 <script>        　　var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});       </script>

 　　第二個參數通常都是一個對象，像上面的這個例子裡就設定了不顯示捲軸。常用的參數如下：
               hScroll                 false 禁止橫向滾動 true橫向滾動 預設為true
               vScroll                 false 精緻垂直滾動 true垂直滾動 預設為true
               hScrollbar            false隱藏水平方向上的捲軸
               vScrollbar            false 隱藏垂直方向上的捲軸
               fixedScrollbar      在iOS系統上，當元素拖動超出了scroller的邊界時，捲軸會收縮，設定為true可以禁止捲軸超出
                                        scroller的可見地區。預設在Android上為true， iOS上為false
               fadeScrollbar  　  false 指定在無漸隱效果時隱藏捲軸
               hideScrollbar  　  在沒有使用者互動時隱藏捲軸 預設為true
               bounce            　啟用或禁用邊界的反彈，預設為true
               momentum     　 啟用或禁用慣性，預設為true，此參數在你想要儲存資源的時候非常有用
               lockDirection       false取消拖動方向的鎖定， true拖動只能在一個方向上（up/down 或者left/right）

各種效果的實現滾動重新整理　　‘Pull to refresh‘ demo

        自從Twitter和一些Apple的本地化應用出現了這個效果之後，這個效果就變得非常流行。你可以看看這兒先一睹為快。
       最新版中，作者把把"pull to refresh"這個部分單分出來作為iScroll的一個額外外掛程式。你可以點擊這兒看看pull to refresh是如何工作滴。你只需要做的就是自訂pullDownAction()這個方法。你可能需要一個ajax來載入新的內容，不過一旦DOM樹發生了變化要記得調用refresh這個方法來。需要記住的是在例子中我們加了1秒的延遲來類比網路的延遲效果。當然，如果你不想使用這個延遲，那就把setTimeout方法去掉就行了。

縮放(pinch / zoom)　　‘Pull to refresh‘ demo

        我們不得不面對一個事實，那就是光有滾動其實沒什麼新意的。這就是為什麼在iScroll 4這個版本裡我們允許你可以放
        大和縮小。想要這個功能，只需要設定放大的參數zoom 為true即可實現利用手勢來放大和縮小。你可以看看這兒。
        雙擊放大和縮小的功能在iScroll 4裡也是得到支援的。要使用縮放功能，你至少需要如下配置：               

 var myScroll =new iScroll("wrapper",{zoom:true});

       如果你想對縮放功能進行深度的自訂的話可以使用下面的一些選項：
               zoomMax   指定允許放大的最大倍數，預設為4
      【注意事項】：如果想要圖片縮放的效果很好的話要把他們放到硬體的合成層中。通俗點說，就是在所有需要縮放的img元素上使用-webkit-transform:translate3d(0,0,0)來實現，而且尤為重要的是，硬體的加速會佔用大量資源，要謹慎使用，否則你的應用可能就此崩潰。
捕捉元素（snap and snap to element）　　‘Carousel‘ demo

　　SNAP功能是判斷元素是否滑動到指定位置。通過這個效果可以製作花哨的跑馬燈效果。

　　外掛程式會自動分析捲動區域內相同標籤或相同大小的元素做為捕捉對象，也可以通過參數指定捕捉的對象                

 var myscroll=new iScroll("wrapper",{                       snap:true,                       momentum:false,                       hScrollbar:false,                       vScrollbar: false                  });

         可以通過設定snap參數為指定標籤來設定捕捉對象。比如捕捉li標籤。               

 var myscroll=new iScroll("wrapper",{                      snap:"li",                      momentum:false,                      hScrollbar:false,                      vScrollbar:false                });

           在這個例子中scroller可以捕捉到捲動區域中最左上方的li元素 

自訂捲軸（custom scrollbars）
          在iScroll 4這個版本中，可以利用一系列的css來自訂捲軸的呈現。可以給捲軸添加一個class參數，如下：                  

var myscroll=new iScroll("wrapper",{
　　scrollbarClass: "myScrollbar"});

          需要提醒的是，捲軸是由兩個元素組合而成的：容器和顯示器。容器同wrapper的高度相同，而顯示器則代表的是捲軸本身。
           捲軸的HTML結構如下：                  

　　　　　　　　　　<div class="myScrollbarV">                          <div></div>                  </div>                 .myscrollbarV{                           position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;                  }                .myScrollbarV > div {                           position:absolute;                           z-index:100;                           width:100%;                             /* The following is probably what you want to customize */                           background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));                           border:1px solid #800;                          -webkit-background-clip:padding-box;                          -webkit-box-sizing:border-box;                          -webkit-border-radius:4px;                          -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);                 }

 通用方法：

     （1）refresh                          在DOM樹發生變化時，應該調用此方法

　　　　　　eg: setTimeout(function () { myScroll.refresh(); }, 0); 

     （2）iScroll還提供了scrollTo, scrollToElement和scrollToPage三個方法讓你能夠通過javascript來控制滾動效果。

　　　　scrollTo(x, y, time, relative)：在指定的time時間內讓內容捲軸x/y的位置。如myScroll.scrollTo(0, -100, 200) 在200毫秒內Y軸向下滾動100像素。 myScroll.scrollTo(0, 10, 200, true)可以實現相對當前位置在200毫秒內Y軸向上滾動10像素的效果。

　　　　scrollToElement(element, time)：在指定的時間內滾動到指定的元素。如myScroll.scrollToElement(‘li:nth-child(10)‘, 100) 在100毫秒內滾動到第10個li元素的位置。第1個參數可以用CSS3中的選取器來篩選元素。

　　　　snapToPage(pageX, pageY, time)：在200毫秒內從第1頁滾動到第2頁（0代表第1頁，1代表第2頁）。這個使用SNAP功能的時候可以調用這個函數。

     （3）detroy()                       完全消除myscroll及其佔用的記憶體空間
                eg: myscroll.destroy();

　　　　　　　　myScroll = null;

iScroll的發展方向

• 表單域的支援
• 縮放的最佳化
• 更好的案頭瀏覽器的相容性
• onScrol事件的最佳化
• 加個雜湊值的變化
• DOM改變後自動重新整理

iScroll.js外掛程式使用方法