iscroll.js文档

　　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></li>

      <li></li>

      <li></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，当显示两个滚动条时，这将添加到容器元素中。通常只有一个（水平或垂直）是可见的。

更多请参考官方文档。

结束