在此文檔中你會發現很多例子來教會你如何快速上手iScroll腳本庫。參看文中的demo小例子並仔細閱讀此文檔，可能有點小無聊，但是這篇文章中卻是iScroll這個腳本庫的精髓之所在哦。
iScroll需要對所要進行滾動的元素進行初始化，並且不限定一個頁面中使用iScroll的元素的個數（這里不考慮您的硬件配置）。滾動元素中內容的類型和長度在一定程度上將會影響iScroll腳本庫里可以同時使用的元素的個數。
使用iScroll這個腳本庫時，DOM樹的結構要足夠簡單，移除不必要的標簽，盡量避免過多的標簽嵌套使用。
最優的使用iScroll的結構如下所示：
//isScroll JS
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', { checkDOMChanges: true });
/*
setInterval(function () {
if (myScroll.isReady())
document.getElementById('thelist').innerHTML += '<UL><LI>new row</LI></UL>';
}, 2000);
*/
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
</ul>
</div>
</div>
iScroll里傳遞的參數
iScroll里的第二個參數允許你自定義一些內容，比如下面的這段代碼：
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
第二個參數通常都是一個對象，像上面的這個例子里就設定了不顯示滾動條。常用的參數如下：
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）
為了保持資源的完整性，建議去除滾動條
iScroll拉動刷新（pull to refresh）
自從Twitter和一些Apple的本地化應用出現了這個效果之后，這個效果就變得非常流行。你可以看看這兒先一睹為快。 我最近把"pull to refresh"這個部分單分出來作為iScroll的一個額外插件。你可以點擊這兒看看pull to refresh是如何工作 滴。你只需要做的就是自定義pullDownAction()這個方法。你可能需要一個ajax來加載新的內容，不過一旦DOM樹發生 了變化要記得調用refresh這個方法來。需要記住的是在例子中我們加了1秒的延遲來模擬網絡的延遲效果。當然，如果 你不想使用這個延遲，那就把setTimeout方法去掉就行了。
iScroll拉動刷新（pull to refresh）
自從Twitter和一些Apple的本地化應用出現了這個效果之后，這個效果就變得非常流行。你可以看看這兒先一睹為快。 我最近把"pull to refresh"這個部分單分出來作為iScroll的一個額外插件。你可以點擊這兒看看pull to refresh是如何工作 滴。你只需要做的就是自定義pullDownAction()這個方法。你可能需要一個ajax來加載新的內容，不過一旦DOM樹發生 了變化要記得調用refresh這個方法來。需要記住的是在例子中我們加了1秒的延遲來模擬網絡的延遲效果。當然，如果 你不想使用這個延遲，那就把setTimeout方法去掉就行了。
iScroll縮放(pinch / zoom)
我們不得不面對一個事實，那就是光有滾動其實沒什么新意的。這就是為什么在iScroll 4這個版本里我們允許你可以放 大和縮小。想要這個功能，只需要設置放大的參數zoom 為true即可實現利用手勢來放大和縮小。你可以看看這兒。 雙擊放大和縮小的功能在iScroll 4里也是得到支持的。要使用縮放功能，你至少需要如下配置：
var myScroll =new iScroll("wrapper",{zoom:true});
如果你想對縮放功能進行深度的自定義的話可以使用下面的一些選項：
zoomMax 指定允許放大的最大倍數，默認為4
【注意事項】：如果想要圖片縮放的效果很好的話要把他們放到硬件的合成層中。通俗點說，就是在所有需要縮放的 img元素上使用-webkit-transform:translate3d(0,0,0)來實現，而且尤為重要的是，硬件的加速會占用大量 資源，要謹慎使用，否則你的應用可能就此崩潰。
iScroll捕捉元素（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
});
iScroll捕獲元素，可以通過傳遞一個字符串來作為查詢條件，如下：
var myscroll=new iScroll("wrapper",{
snap:"li",
momentum:false,
hScrollbar:false,
vScrollbar:false
});
在這個例子中scroller可以捕捉到滾動區域中最左上角的li元素
iScroll自定義滾動條（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);
}
iScroll通用方法：
（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()