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.scrollToElement("li:nth-child(10)",100);
（4）detroy() 完全消除myscroll及其占用的內存空間
eg: myscroll.destroy()
#content {
position:relative; /* On older OS versions "position" and "z-index" must be defined (absolute | relative), */
z-index:1; /* it seems that recent webkit is less picky and works anyway. */
height:320px;
overflow-y: auto;
width:auto;
margin:0 30px;
}
</style>
<script type="text/javascript">
var myScroll;
function loaded() {
setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below.
// Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
myScroll = new iScroll('content', {desktopCompatibility:true});
//myScroll = new iScroll("content");
}
function setScrollEvent(){
// Check screen size on orientation change
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false);
// Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
// If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
}
function setHeight() {
var headerH = document.getElementById('header').offsetHeight,
footerH = 70,//document.getElementById('footer').offsetHeight,
wrapperH = window.innerHeight - headerH - footerH;
//document.getElementById('right_side').style.height = wrapperH + 'px';
}
</script>
</head>
<body class="default" id="default" onload="move_fun();loaded();setScrollEvent();myScroll.refresh();">
以上是4.1版本的使用，下面是3.x版本的使用
<style type="text/css">
#left_side{
position:relative; /* On older OS versions "position" and "z-index" must be defined (absolute | relative), */
z-index:1; /* it seems that recent webkit is less picky and works anyway. */
border: 1px solid #ECECEC;
}
#leftSide_inner{
-webkit-tap-highlight-color:rgba(0,0,0,0);
/*width:100%;
float:left;*/
padding:0;
}
</style>
<script type="text/javascript">
var myScroll;
Shadowbox.init({
skipSetup: true,
players: ["iframe"],
modal: true
});
function loaded() {
setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below.
myScroll = new iScroll('leftSide_inner', {desktopCompatibility:true});
}
function setScrollEvent(){
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false);
document.addEventListener('DOMContentLoaded', loaded, false);
var objs3 = document.getElementsByTagName("input");
for(var i = 0, length = objs3.length; i < length; i++ )
{
objs3[i].addEventListener('touchstart', function(e) {
e.stopPropagation();
}, false);
}
}
function setHeight() {
var headerH = document.getElementById('header').offsetHeight,
footerH = 70,//document.getElementById('footer').offsetHeight,
wrapperH = window.innerHeight - headerH - footerH;
//document.getElementById('right_side').style.height = wrapperH + 'px';
}
</script>
<div id="leftSide">
<div class="leftSide_inner" id="left_side">
<div id="leftSide_inner"></div>
</div>
</div>
注意：最外面的leftSide，要有overflow:auto,而調用isCroll使用left_side和leftSide_inner，在頁面加載后執行：loaded();setScrollEvent();myScroll.refresh();即可