iSroll5用着確實不錯，做混合app的首選，能給項目添加不少效果。iScroll 不僅僅是 滾動。它可以處理任何需要與用戶進行移動交互的元素。在你的項目中包含僅僅 4kb 大小的 iScroll，你的項目便擁有了滾動，縮放，平移，無限滾動，視差滾動，旋轉功能。
你可以用它實現上拉加載和下拉刷新的效果，也可以實現懶加載的效果，也可以用來做橫向滾動的幻燈片效果。
先從最簡單的結構說起吧
<pre name="code" class="html"><span style="font-size:14px;"><div id="wrapper">
<div id="scroller">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
</div</span><span style="font-size:14px;"><script>
var myScroll = new IScroll('#wrapper');
</script></span>在這裏我們新創建了一個iSroll對象，值得注意的是在iScroll5中new新對象的時候使用的是IScroll，和4中的是有區別的。另外需要注意的是iScroll只會選取第一個子標籤作爲滑動的內容，也就是說上面html代碼中如果id=scroller的div標籤有其他兄弟標籤的話那iScroll還是會選擇第一個作爲滾動內容。完整代碼如下：在這裏想說的是上面代碼是在onload之後初始化的iScroll，如果我們的內容數據比較多，或者我們的頁面上有用ajax異步獲取數據的地方，那麼你會發現我們的這個iScroll能滾動的只是整個頁面的一部分，原因之後再講。
<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
</script>
</head>
<body onload="loaded()">
<div id="wrapper">
<div id="scroller">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
</div>
</body>
</html>有時候我們在初始化iScroll的時候需要配置一些參數，例如：
<span style="font-size:14px;">var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
});</span>上面的例子示例了在 iScroll 初始化時開啓鼠標滾輪支持和滾動條支持。
類似的參數還有：
myScroll = new IScroll('#wrapperSale', {
preventDefault:false,//爲true就是阻止事件冒泡
click: true,//允許點擊操作，在做app特別有用
probeType: 3,//表明此插件，可以監聽scroll事件
scrollX: true,//同意在X方向上滾動
scrollY: true,//同意在Y方向上滾動
momentum: true,//允許慣性效果
snap: true//分頁效果,滾動不需要,但是在做幻燈片時需要
})更多配置請查看：iScroll5中文API
這篇講解的比較淺顯，主要是簡單的結構是各種iScroll應用場景的基礎，都是在其基礎上添加相應的代碼
下一篇：用iScroll5實現幻燈片效果