概要

iScroll 4 這個(gè)版本完全重寫了iScroll這個(gè)框架的原始代碼。這個(gè)項(xiàng)目的產(chǎn)生完全是因?yàn)橐苿?dòng)版webkit瀏覽器（諸如iPhone，iPad，Android 這些系統(tǒng)上廣泛使用）
提供了一種本地化的方式來對(duì)一個(gè)限定了高度和寬度的元素的內(nèi)容進(jìn)行滑動(dòng)。很不幸的是，這種情況下所有的web應(yīng)用的頁(yè)面就不能夠包含具有position:absolute的頭、頁(yè)尾或者是一個(gè)內(nèi)容可滾動(dòng)的
中間區(qū)域。

然而，Android系統(tǒng)最新修訂版已經(jīng)可以支持這種功能了（盡管支持的力度還不是特別好），Apple公司似乎不太情愿將one-finger滑動(dòng)事件運(yùn)用到div元素上。
除了以前版本的iScroll的特性以外，iScroll 4還包括如下的特性：

     （1）縮放（Pinch/Zoom）
    （2）拉動(dòng)刷新（Pull up/down to refresh）
    （3）速度和性能提升
    （4）精確捕捉元素
    （5）自定義滾動(dòng)條
      友情提示：iScroll 4并不是iScroll 3的簡(jiǎn)易替代版本，API文檔已經(jīng)不一樣了。同時(shí)考慮到此版本正處于測(cè)試期，一些API可能會(huì)有細(xì)微的變化。

使用指南

在此文檔中你會(huì)發(fā)現(xiàn)很多例子來教會(huì)你如何快速上手iScroll腳本庫(kù)。參看文中的demo小例子并仔細(xì)閱讀此文檔，可能有點(diǎn)小無聊，但是這篇文章中卻是iScroll這個(gè)腳本庫(kù)的精髓之所在哦。
iScroll需要對(duì)所要進(jìn)行滾動(dòng)的元素進(jìn)行初始化，并且不限定一個(gè)頁(yè)面中使用iScroll的元素的個(gè)數(shù)（這里不考慮您的硬件配置）。滾動(dòng)元素中內(nèi)容的類型和長(zhǎng)度在一定程度上將會(huì)影響iScroll腳本庫(kù)里
可以同時(shí)使用的元素的個(gè)數(shù)。
使用iScroll這個(gè)腳本庫(kù)時(shí)，DOM樹的結(jié)構(gòu)要足夠簡(jiǎn)單，移除不必要的標(biāo)簽，盡量避免過多的標(biāo)簽嵌套使用。
最優(yōu)的使用iScroll的結(jié)構(gòu)如下所示：

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

在這個(gè)小例子中，ul標(biāo)簽將會(huì)被滾動(dòng)。iScroll一定要與滾動(dòng)內(nèi)容外面的wrapper進(jìn)行聯(lián)系才會(huì)產(chǎn)生效果。
【注意事項(xiàng)】：
只有wrapper里的第一個(gè)子元素才可以滾動(dòng)，如果你想要更多的元素可以滾動(dòng)，那么你可以試試下面的這種寫法：

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

在這個(gè)例子中，scroller這個(gè)元素可以滾動(dòng)，即便它包含兩個(gè)ul元素

iScroll必須在調(diào)用之前實(shí)例化，你可以在下面幾種情況下對(duì)iScroll進(jìn)行實(shí)例化：

　　（1）使用onDOMContentLoaded事件實(shí)現(xiàn)滾動(dòng)

適用于滾動(dòng)內(nèi)容只包含文字、圖片，并且所有的圖片都有固定的尺寸

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

注意：myscroll這個(gè)變量是全局的，因此你可以在任何地方調(diào)用它

　?。?）使用onLoad事件實(shí)現(xiàn)滾動(dòng)

因?yàn)镈OMContentLoaded事件是載入DOM結(jié)構(gòu)后就會(huì)被調(diào)用，所以在圖片等元素未載入前可能無法確定滾動(dòng)區(qū)域的長(zhǎng)寬，此時(shí)可以使用onLoad事件來實(shí)現(xiàn)。

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

這種情況下iScroll會(huì)在頁(yè)面資源（包括圖片）加載完畢100ms之后得到初始化，這應(yīng)該是一種比較安全的調(diào)用iScroll的方式。

　?。?）inline初始化

這種情況會(huì)在頁(yè)面加載到j(luò)s的時(shí)候就進(jìn)行調(diào)用，此方法不推薦使用，但是很多javascript的大牛都在用這種方式，我又有什么理由不贊成呢？

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

不過建議你使用一些框架的ready方法來安全調(diào)用iScroll（比如jquery里的ready()）。

iScroll里傳遞的參數(shù)

　　iScroll里的第二個(gè)參數(shù)允許你自定義一些內(nèi)容，比如下面的這段代碼：

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

第二個(gè)參數(shù)通常都是一個(gè)對(duì)象，像上面的這個(gè)例子里就設(shè)定了不顯示滾動(dòng)條。常用的參數(shù)如下：

               hScroll                 false 禁止橫向滾動(dòng) true橫向滾動(dòng) 默認(rèn)為true
               vScroll                 false 精致垂直滾動(dòng) true垂直滾動(dòng) 默認(rèn)為true
               hScrollbar            false隱藏水平方向上的滾動(dòng)條
               vScrollbar            false 隱藏垂直方向上的滾動(dòng)條
               fixedScrollbar      在iOS系統(tǒng)上，當(dāng)元素拖動(dòng)超出了scroller的邊界時(shí)，滾動(dòng)條會(huì)收縮，設(shè)置為true可以禁止?jié)L動(dòng)條超出
                                        scroller的可見區(qū)域。默認(rèn)在Android上為true， iOS上為false
               fadeScrollbar  　  false 指定在無漸隱效果時(shí)隱藏滾動(dòng)條
               hideScrollbar  　  在沒有用戶交互時(shí)隱藏滾動(dòng)條 默認(rèn)為true
               bounce            　啟用或禁用邊界的反彈，默認(rèn)為true
               momentum     　 啟用或禁用慣性，默認(rèn)為true，此參數(shù)在你想要保存資源的時(shí)候非常有用
               lockDirection       false取消拖動(dòng)方向的鎖定， true拖動(dòng)只能在一個(gè)方向上（up/down 或者left/right）

各種效果的實(shí)現(xiàn)

滾動(dòng)刷新　　'Pull to refresh' demo

        自從Twitter和一些Apple的本地化應(yīng)用出現(xiàn)了這個(gè)效果之后，這個(gè)效果就變得非常流行。你可以看看這兒先一睹為快。
       最新版中，作者把把"pull to refresh"這個(gè)部分單分出來作為iScroll的一個(gè)額外插件。你可以點(diǎn)擊這兒看看pull to refresh是如何工作滴。你只需要做的就是自定義pullDownAction()這個(gè)方法。你可能需要一個(gè)ajax來加載新的內(nèi)容，不過一旦DOM樹發(fā)生了變化要記得調(diào)用refresh這個(gè)方法來。需要記住的是在例子中我們加了1秒的延遲來模擬網(wǎng)絡(luò)的延遲效果。當(dāng)然，如果你不想使用這個(gè)延遲，那就把setTimeout方法去掉就行了。

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

        我們不得不面對(duì)一個(gè)事實(shí)，那就是光有滾動(dòng)其實(shí)沒什么新意的。這就是為什么在iScroll 4這個(gè)版本里我們?cè)试S你可以放
        大和縮小。想要這個(gè)功能，只需要設(shè)置放大的參數(shù)zoom 為true即可實(shí)現(xiàn)利用手勢(shì)來放大和縮小。你可以看看這兒。
        雙擊放大和縮小的功能在iScroll 4里也是得到支持的。要使用縮放功能，你至少需要如下配置：              

 var myScroll =new iScroll("wrapper",{zoom:true});
       如果你想對(duì)縮放功能進(jìn)行深度的自定義的話可以使用下面的一些選項(xiàng)：
               zoomMax   指定允許放大的最大倍數(shù)，默認(rèn)為4
      【注意事項(xiàng)】：如果想要圖片縮放的效果很好的話要把他們放到硬件的合成層中。通俗點(diǎn)說，就是在所有需要縮放的img元素上使用-webkit-transform:translate3d(0,0,0)來實(shí)現(xiàn)，而且尤為重要的是，硬件的加速會(huì)占用大量資源，要謹(jǐn)慎使用，否則你的應(yīng)用可能就此崩潰。

捕捉元素（snap and snap to element）　　'Carousel' demo

　　SNAP功能是判斷元素是否滑動(dòng)到指定位置。通過這個(gè)效果可以制作花哨的跑馬燈效果。

　　插件會(huì)自動(dòng)分析滾動(dòng)區(qū)域內(nèi)相同標(biāo)簽或相同大小的元素做為捕捉對(duì)象，也可以通過參數(shù)指定捕捉的對(duì)象    

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

可以通過設(shè)置snap參數(shù)為指定標(biāo)簽來設(shè)定捕捉對(duì)象。比如捕捉li標(biāo)簽。

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

在這個(gè)例子中scroller可以捕捉到滾動(dòng)區(qū)域中最左上角的li元素

自定義滾動(dòng)條（custom scrollbars）
在iScroll 4這個(gè)版本中，可以利用一系列的css來自定義滾動(dòng)條的呈現(xiàn)。可以給滾動(dòng)條添加一個(gè)class參數(shù)，如下：

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

需要提醒的是，滾動(dòng)條是由兩個(gè)元素組合而成的：容器和顯示器。容器同wrapper的高度相同，而顯示器則代表的是滾動(dòng)條本身。
滾動(dòng)條的HTML結(jié)構(gòu)如下：

<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樹發(fā)生變化時(shí)，應(yīng)該調(diào)用此方法
eg: setTimeout(function () { myScroll.refresh(); }, 0);

（2）iScroll還提供了scrollTo, scrollToElement和scrollToPage三個(gè)方法讓你能夠通過javascript來控制滾動(dòng)效果。
　　　　scrollTo(x, y, time, relative)：在指定的time時(shí)間內(nèi)讓內(nèi)容滾動(dòng)條x/y的位置。如myScroll.scrollTo(0, -100, 200) 在200毫秒內(nèi)Y軸向下滾動(dòng)100像素。 myScroll.scrollTo(0, 10, 200, true)可以實(shí)現(xiàn)相對(duì)當(dāng)前位置在200毫秒內(nèi)Y軸向上滾動(dòng)10像素的效果。
　　　　scrollToElement(element, time)：在指定的時(shí)間內(nèi)滾動(dòng)到指定的元素。如myScroll.scrollToElement('li:nth-child(10)', 100) 在100毫秒內(nèi)滾動(dòng)到第10個(gè)li元素的位置。第1個(gè)參數(shù)可以用CSS3中的選擇器來篩選元素。
　　　　snapToPage(pageX, pageY, time)：在200毫秒內(nèi)從第1頁(yè)滾動(dòng)到第2頁(yè)（0代表第1頁(yè)，1代表第2頁(yè)）。這個(gè)使用SNAP功能的時(shí)候可以調(diào)用這個(gè)函數(shù)。

（3）detroy()                       完全消除myscroll及其占用的內(nèi)存空間
 eg: myscroll.destroy();
　myScroll = null;

iScroll的發(fā)展方向

表單域的支持
縮放的優(yōu)化
更好的桌面瀏覽器的兼容性
onScrol事件的優(yōu)化
加個(gè)哈希值的變化
DOM改變后自動(dòng)刷新

最新評(píng)論