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> <ul> <li></li> ..... </ul> </div>
在这个小例子中，ul标签将会被滚动。iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
【注意事项】：
只有wrapper里的第一个子元素才可以滚动，如果你想要更多的元素可以滚动，那么你可以试试下面的这种写法：
<div> <div> <ul> <li></li> ... </ul> <ul> <li></li> ... </ul> </div> </div>
在这个例子中，scroller这个元素可以滚动，即便它包含两个ul元素
iScroll必须在调用之前实例化，你可以在下面几种情况下对iScroll进行实例化：
（1）使用onDOMContentLoaded事件实现滚动
适用于滚动内容只包含文字、图片，并且所有的图片都有固定的尺寸
<script src="https://www.jb51.net/iscroll.js"></script> <script> var myscroll; function loaded(){ myscroll=new iScroll("wrapper"); } window.addEventListener("DOMContentLoaded",loaded,false); </script>
注意：myscroll这个变量是全局的，因此你可以在任何地方调用它
（2）使用onLoad事件实现滚动
因为DOMContentLoaded事件是载入DOM结构后就会被调用，所以在图片等元素未载入前可能无法确定滚动区域的长宽，此时可以使用onLoad事件来实现。
<script src="https://www.jb51.net/iscroll.js"><script> <script> var myscroll; function loaded(){ setTimeout(function(){ myscroll=new iScroll("wrapper"); }，100 ); } window.addEventListener("load",loaded,false); </script>
这种情况下iScroll会在页面资源（包括图片）加载完毕100ms之后得到初始化，这应该是一种比较安全的调用iScroll的方式。
（3）inline初始化
这种情况会在页面加载到js的时候就进行调用，此方法不推荐使用，但是很多javascript的大牛都在用这种方式，我又有什么理由不赞成呢？
<script src="https://www.jb51.net/iscroll.js"></script> <div> <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' demo