iScroll是一個高性能，資源占用少，無依賴，跨平台的javascript上拉加載，下拉刷新的滾動插件，目前版本v5.2.0。
GitHub下載地址：https://github.com/cubiq/iscroll
iScroll進行了不同的優化，為了達到更高的性能，iScroll分為了多個版本，你可以根據項目選擇最適合的版本。
目前有以下版本：
- iscroll.js，這個版本是常規應用的腳本。它包含大多數常用的功能，有很高的性能和很小的體積。
- iscroll-lite.js，精簡版本。它不支持快速跳躍，滾動條，鼠標滾輪，快捷鍵綁定。但如果你所需要的是滾動(特別是在移動平台) iScroll 精簡版 是又小又快的解決方案（這個能應付大多數場景）。
- iscroll-probe.js，探查當前滾動位置是一個要求很高的任務,這就是為什么我決定建立一個專門的版本。如果你需要知道滾動位置在任何給定的時間,這是iScroll給你的。（我正在做更多的測試,這可能最終在常規iscroll.js腳本，請留意）。
- iscroll-zoom.js，在標准滾動功能上增加縮放功能。
- iscroll-infinite.js，可以做無限緩存的滾動。處理很長的列表的元素為移動設備並非易事。 iScroll infinite版本使用緩存機制,允許你滾動一個潛在的無限數量的元素。
使用方法：
頁面引用：
<script type="text/javascript" src="iscroll.js"></script>
HTML結構如下:
1 <div id="wrapper"> 2 <ul> 3 <li>...</li> 4 <li>...</li> 5 ... 6 </ul> 7 </div>
JS初始化:
1 <script type="text/javascript"> 2 var myScroll = new IScroll('#wrapper'); 3 </script>
iScroll配置參數說明：
1 var myScroll = new IScroll('#wrapper', { 2 mouseWheel: true, //是否監聽鼠標滾輪事件 3 scrollbars: true, //是否顯示默認滾動條 4 preventDefault: true,//是否屏蔽默認事件 5 preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }, //列出哪些元素不屏蔽默認事件 6 probeType: 3,//需要使用 iscroll-probe.js 才能生效 probeType ： 1 滾動不繁忙的時候觸發;probeType ： 2 滾動時每隔一定時間觸;probeType ： 3 每滾動一像素觸發一次 7 8 });
API:
| 所屬 | 方法名 | 說明 |
| 滾動 | scrollTo(x, y, time, easing) | 滾動到： x ， y ，事件， easing 方式 x:int y:int time:int Easing: quadratic | circular | back | bounce | elastic 見 IScroll.utils.ease 對象 例： myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic); |
| scrollBy(x, y, time, easing) | 滾動到相對於當前位置的某處其余同上 | |
| scrollToElement(el, time, offsetX, offsetY, easing) | 滾動到某個元素。 el 為必須的參數offsetX/offsetY ：相對於 el 元素的位移。設為 true 即為屏幕中心 | |
| 分割頁面 snap | goToPage(x, y, time, easing) | 根據 options.snap 分割頁面，跳轉到橫向、縱向某頁。 XY 可以同時生效。 |
| next() prev() | 上一頁，下一頁結合 options.snap使用 | |
| 縮放 | zoom(scale, x, y, time) | 縮放容器Scale: 縮放因子 |
| 刷新 | refresh() | 刷新 IScroll |
| 銷毀 | destroy() | 銷毀 IScroll ，節省資源 |
事件使用：
| beforeScrollStart | 用戶點擊屏幕，但是還未初始化滾動前 |
| scrollCancel | 初始化滾動后又取消 |
| scrollStart | 開始滾動 |
| scroll | 滾動中 |
| scrollEnd | 滾動結束 |
| flick | 輕擊屏幕左、右 |
| zoomStart | 開始縮放 |
| zoomEnd | 縮放結束 |
這個在微信中使用還是存在一些小問題，歡迎大家拍磚，共同交流探討。
喜歡H5，web開發的朋友可以加群：374166122
請使用手機"掃一掃"x