iScroll.js的用法

概要

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

    （2）onLoad

    （3）之內聯inline方式

下面咱們逐個來說講這三種用法的優缺點

ONDOMContentLoaded

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

        使用方法：（在head標籤中添加以下代碼）

        <script src="iscroll.js"></script>

        <script>

                 var myscroll;

                function loaded(){

                           myscroll=new iScroll("wrapper");

                 }

               window.addEventListener("DOMContentLoaded",loaded,false);

         </script>

         注意：myscroll這個變量是全局的，所以你能夠在任何地方調用它的函數onLoad

        有些時候在DOMContentLoaded的狀態下就初始化iScroll實際上是有點草率的，所以此時頁面的資源可能尚未所有加載完畢。若是你遇到了一些很怪異的行爲能夠試試下面的寫法：

        <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的方式。

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）

        自從Twitter和一些Apple的本地化應用出現了這個效果以後，這個效果就變得很是流行。你能夠看看這兒先一睹爲快。

       我最近把"pull to refresh"這個部分單分出來做爲iScroll的一個額外插件。你能夠點擊這兒看看pull to refresh是如何工做滴。你只須要作的就是自定義pullDownAction()這個方法。你可能須要一個ajax來加載新的內容，不過一旦DOM樹發生了變化要記得調用refresh這個方法來。須要記住的是在例子中咱們加了1秒的延遲來模擬網絡的延遲效果。固然，若是你不想使用這個延遲，那就把setTimeout方法去掉就好了。

 

縮放(pinch / zoom)

        咱們不得不面對一個事實，那就是光有滾動其實沒什麼新意的。這就是爲何在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）

        捕捉的功能會促使scroller去從新定義位置，這樣能夠製做更加花哨的傳送帶效果。點擊這裏有個小例子。

        默認狀況下，iScroll將scroller分紅四分體，或者是相同大小的wrapper。iScroll 4加入了這個屬性容許捕捉scroller裏的任何元素，不考慮外部wrapper的大小。若是你想要實現這樣的傳送帶效果，我建議你使用「quadrant」分割。最佳的設置以下：

                 var myscroll=new iScroll("wrapper",{

                       snap:true,

                       momentum:false,

                       hScrollbar:false,

                       vScrollbar: false

                  });

          捕獲元素，能夠經過傳遞一個字符串來做爲查詢條件，以下：

                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"

                 });

          你能夠點擊這裏看一個小例子，在這個小例子裏，myScrollbarH這個類被添加到了水平滾動條上，myScrollbarV這個類則被添加給了垂直方向上的滾動條上了。須要提醒的是，滾動條是由兩個元素組合而成的：容器和顯示器。容器同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樹發生變化時，應該調用此方法

     （2）scrollTo()                     滾動到某個位置

               eg: myscroll.scrollTo(0,10,200,true);

     （3）scrollToElement()      滾動到某個元素

               eg: myscroll.scrolToElement("li:nth-child(10)",100);

     （4）detroy()                       徹底消除myscroll及其佔用的內存空間

                eg: myscroll.destroy()