iScroll相關

iScroll是一款用於移動設備web開發的一款插件。像縮放、下拉刷新、滑動切換等移動應用上常見的一些效果均可以輕鬆實現。

iScroll的最新版本是2011.07.03發佈的4.1.7版。最新版比以往更順暢，添加了更多的自定義事件，提供了更高級的可編程性。

使用方法：

DOM結構應儘可能保持簡潔，避免過多的嵌套。滾動區域爲第一個子元素。html代碼：

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

<script type="text/javascript">
/* var myScroll = new IScroll('#wrapper');

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);

var myScroll = new IScroll('.wrapper');*/
</script>

上面的DOM結構中，ul將是滾動的區域。若是想同時滾動多個區域就要用一個容器把須要滾動的區域包起來。

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

 

上面的DOM結構中，兩個UL會同時滾動。

插件的調用須要在頁面徹底加載以後。你能夠經過如下3種方法來實現。

• 設置onDOMContentLoaded事件
• 設置onLoad事件
• 把調用代碼放到頁面的最後。

使用onDOMContentLoaded事件實現滾動

若是滾動區域的長寬是固定的，就能夠經過onDOMContentLoaded事件來實現滾動。

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

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

使用onLoad事件實現滾動

由於DOMContentLoaded事件是載入DOM結構後就會被調用，因此在圖片等元素未載入前可能沒法肯定滾動區域的長寬，此時可使用onLoad事件來實現。

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

 這種狀況下iScroll會在頁面資源（包括圖片）加載完畢100ms以後獲得初始化，這應該是一種比較安全的調用iScroll的方式。若是這個時間後還有元素未徹底載入致使沒法計算滾動區域長寬，可能會致使錯誤。但這是目前最好的方法了。

把調用的代碼放到最後(inline初始化)

不少javascript大師推薦用這種方法來實現一些須要先加載DOM的特效。所以，在此也可使用這個方法。但插件開發者彷佛並不推薦。由於有可能會出現執行javascript以前沒有徹底載入頁面元素，好比圖片。

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

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

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）

各類效果的實現

滾動刷新http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

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

縮放(pinch / zoom)http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

咱們不得不面對一個事實，那就是光有滾動其實沒什麼新意的。這就是爲何在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）　http://cubiq.org/dropbox/iscroll4/examples/carousel/ 

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>
<style type="text/css">
.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);
}
</style>

通用方法：

     （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官網：http://iscrolljs.com/