iScroll是高性能的、小尺寸的、无依赖关系的、支持多平台的滑动JavaScript库。 当然，不只是scroll，还有滚动、缩放、平移、无限滚动、视差滚动等。
为了达到更好的新能，所以iScroll分为了很多版本，我们可以根据需要来使用，目前主要有下面的一些js库：
- iscroll.js，它是通用脚本。它包括最常用的功能，并在占据很小的内存中提供非常高的性能。我们一般使用的都是这个。
- iscroll-lite.js，它是主要脚本的精简版本。它不支持snap，scrollbars，鼠标滚轮，键绑定。但是如果您需要的只是滚动（尤其是在移动设备上），iScroll lite是最小，最快的解决方案。
- iscroll-probe.js，探测当前的滚动位置是一项艰巨的任务，这就是为什么我决定为此建立专用版本。如果您需要知道任何给定时间的滚动位置，这是iScroll。（我正在做一些更多的测试，这可能会在正常的
iscroll.js脚本中，所以请留意）。 - iscroll-zoom.js，添加缩放到标准滚动。
- iscroll-infinite.js，可以做无限次和缓存的滚动。处理很长的元素列表对于移动设备来说是不容易的。iScroll无限使用缓存机制，可以滚动潜在的无限数量的元素。
下面的连接是isroll常用的一些效果的demo，通过这些demo我们可以更好地学习与掌握。
https://github.com/cubiq/iscroll/tree/master/demos
下载安装
在github上clone该库，然后进入bulid文件夹中，我们就可以发现这些js文件了，目录结构如下所示：
我们常用的一般是iscroll.js，这个文件不大，只有两千行，50多kb，在实际生产环境中我们使用压缩版本会更小。 也可以根据具体的需要选择使用。
然后引入到项目文件中即可。
第一个例子
iscroll是不限制一个页面中的滚动区域的数量的，但是对于每一个滚动区域，我们需要为它在外层添加一个.wrapper的类名(当然也可以是别的名称)，如下所示：
<div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div>
没错，就是这么简单，iscroll提倡简洁的DOM。在这个例子中，ul将会被滚动，且只有容器的第一个孩子节点被滚动，其他的孩子将会被忽略。
提示：
box-shadow，opacity，text-shadow和alpha通道是不利于性能的。滚动可能看起来不错，但是一旦你的DOM变得越来越复杂，性能表现将会变差。
然后就是配置脚本了，最终的最基础的配置如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scroll</title> <script src="./build/iscroll.js"></script> <script> var myScroll; function load() { myScroll = new IScroll('.wrapper'); } </script> </head> <body onload="load()"> <div class="wrapper"> <ul> <li>1</li> <li>1</li> <li>1</li> </ul> </div> </body> </html>
需要在DOM准备就绪时启动iScroll。最安全的打算是在窗口onload事件上启动它。DOMContentLoaded或内联初始化也很好，但请记住脚本需要知道滚动区域的高度/宽度。如果您的图像没有明确的宽度/高度声明，iScroll将很可能最终导致错误的滚动尺寸。
另外： 在初始化IScroll实例时，我们这里传入的类似于css选择器，它只会获得第一个元素，因为它调用的api是querySelector而不是querySelectorAll，所以如果页面中有多个滚动区域，需要遍历实现。 且我们还可以传入获得的元素，如new IScroll(document.getElementById("wrapper"));
配置IScroll
我们可以通过传入第二个参数来配置iscroll，如下所示：
myScroll = new IScroll('.wrapper', { mouseWheel: true, scrollbars: false });
即使滑动支持鼠标的滚动和显示scrolllbar。
iScroll使用各种技术根据设备/浏览器功能滚动，通常您不需要配置引擎，iScroll足够聪明，为您挑选最好的。尽管如此，重要的是了解iScroll工作的机制以及如何配置它们。
- useTransform 默认为true， 即使用css的transform属性。
- useTransition 默认为true， 即执行动画。
- HWCompositing 默认为true， 此选项尝试通过附加
translateZ(0)到转换CSS属性将卷轴放在硬件层上。这大大提高了性能，特别是在移动设备上。
基本功能
- bounce：弹跳 默认为true，即滚轮遇到边界时，会执行一个弹跳动画，如果设置为false，那么表现会更平滑。
- click: 点击 默认为false， iscroll必须阻止某些默认的浏览器行为。如果希望应用程序响应点击事件，则必须设置为true。
- disableMouse 、 disablePointer、 disableTouch： 这些功能默认为false， 如果需要，可以设置为true。
- freeScroll：默认为false。 通常对于2D的滚动，往往是左右滚动时，上下不可滚动；上下滚动时，左右不可滚动，如果设置为true，我们就可以随意滚动。
- momentum: 默认为true， 当用户在屏幕上快速轻弹时，您可以打开/关闭动画动画。关闭这个大大提高了性能
- mouseWheel： 默认为true，监听鼠标滚轮事件。
- preventDefault: 默认为true，阻止默认事件。
- scrollbars: 默认为false。
- scrollX和scrollY： 默认垂直滚动，即前者为false，后者为true。
- startX和startY： 默认滚动的起始位置为00。 也可以自行设置。
- tap: 默认为false。即当用户点击到scrollbars时是否触发事件。
- fadeScrollbars: 默认为false。 当不使用时，滚动条会消失。
- interactiveScrollbars： 默认为false。 用户条变得可拖动，用户可以与之交互。
- resizeScrollbars: 默认为true。 即我们可以自定义scrollbars的大小比例等。
- shrinkScrollbars: 默认为false。 有效值为clip和scale
'。clip'只需将指示器移动到其容器外部，印象就是滚动条缩小，但它只是简单地移出屏幕。如果您可以通过视觉效果生活，此选项将大大提高整体性能。
对滚动条进行个性化设置： 首先设置scrollbars为custom。 然后就可以使用下面的类来设计了：
- .iScrollHorizontalScrollbar，它应用于水平容器。实际托管滚动条指示器的元素。
- .iScrollVerticalScrollbar，与上述相同，但用于垂直容器。
- .iScrollIndicator，实际的滚动条指示器。
- .iScrollBothScrollbars，当显示两个滚动条时，这将添加到容器元素中。通常只有一个（水平或垂直）是可见的。
更多请参考官方文档。
结束