list-iscroll5.2

简介

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

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

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

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

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

iScroll版本

目前有以下版本：

• iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
• iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
• iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。
• iscroll-zoom.js，在标准滚动功能上增加缩放功能。
• iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。

使用方法

1、HTML

尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。最佳的HTML结构如下：

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

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

如果你想要更多的元素的LI 可以滚动，那么你可以用下面的这种写法：

<div id="wrapper">
    <div id="srcoller">
        <ul>
            <li>...</li>
            <li>...</li>
            ... //这里是内容，scroller高于一定大于wrapper高度，wrapper为滚动区域scroller为滚动内容。
        </ul>
    </div>
</div>

2、调用

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

<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll = new IScroll(‘#wrapper‘,{

mouseWheel: true, //开启鼠标滚轮支持
scrollbars: true //开启滚动条
});
</script>

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

参数

API:

事件使用：

IScroll的属性：

官网：http://iscrolljs.com/

GitHub：https://github.com/cubiq/iscroll/

更多参数：http://wiki.jikexueyuan.com/project/iscroll-5/

https://segmentfault.com/a/1190000003113280