iScroll 滚动插件使用

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。

官网：http://iscrolljs.com/

> 它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

 

> iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。给它一个扫帚它甚至能帮你打扫办公室。

即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更多不可思议的功能。具体来说：

- 细粒度控制滚动位置，甚至在滚动过程中。你总是可以获取和设置滚动器的x，y坐标。
- 动画可以使用用户自定义的擦出功能（反弹'bounce'，弹性'elastic'，回退'back'，...）。
- 开箱即用的多平台支持。从很老的安卓设备到最新的iPhone，从Chrome浏览器到IE浏览器。

## 快速入门

> 最好的学习iScroll的方法是看示例。在存档文件中你会发现一个叫做`demo`的文件夹[示例](https://github.com/cubiq/iscroll/tree/master/demos)。这里有大多数脚本功能的概述。

`IScroll`是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。

尽可能保持DOM结构的简洁,最佳的HTML结构如下：

```
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
```

iScroll作用于滚动区域的外层。在上面的例子中，`UL`元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。

最基本的脚本初始化的方式如下：

```
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>
```

> 第一个参数可以是滚动容器元素的DOM选择器字符串，也可以是滚动容器元素的引用对象。下面是一个有效的语法：

```
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
```

> 所以基本上你要么直接传递元素，要么传递一个`querySelector`字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:

```
var myScroll = new IScroll('.wrapper');
```

**注意** ：iScroll使用的是`querySelector` 而不是 `querySelectorAll`，所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll，你需要构建自己的循环机制。

**注意** ：当DOM准备完成后iScroll需要被初始化。最保险的方式是在window的`onload`事件中启动它。脚本需要知道滚动区域的高度和宽度。如果你有一些图片在滚动区域导致不能立马获取区域的高度和宽度，iScroll的滚动尺寸有可能会错误。