简介
iScroll是一个高性能，资源占用少，无依赖，多平台的滚动插件。
它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。
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结构如下：
- ...
- ...
...
在上面的例子中，只有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>
参数
| 所属 | 属性名 | 说明 | 默认值 |
| 核心库croe | options.useTransform | 是否使用 CSS3 的 Transform属性 | true |
| options.useTransition | 是否使用 CSS3 的 Transition属性，否则使用 requestAnimationFram 代替 | true | |
| options.HWCompositing | 是否启用硬件加速 | true | |
| options.bounce | 是否启用弹力动画效果，关掉可以加速 | true | |
| 基础特性Basic features | options.click | 是否启用 click 事件。建议关闭此选项并启用自定义的 tap 事件（ options.tap ） | false |
| options.disableMouse | 是否关闭鼠标事件探测。如知道运行在哪个平台，可以开启它来加速。 | false | |
| options.disablePointer | 是否关闭指针事件探测。如知道运行在哪个平台，可以开启它来加速。 | false | |
| options.disableTouch | 是否关闭触摸事件探测。如知道运行在哪个平台，可以开启它来加速。 | false | |
| options.eventPassthrough | 使用 IScroll 的横轴滚动时，如想使用系统立轴滚动并在横轴上生效，请开启。 | false | |
| options.freeScroll | 主要在上下左右滚动都生效时使用，可以向任意方向滚动。 | false | |
| options.keyBindings | 绑定按键事件。 | false | |
| options.invertWheelDirection | 反向鼠标滚轮。 | false | |
| options.momentum | 是否开启动量动画，关闭可以提升效率。 | true | |
| options.mouseWheel | 是否监听鼠标滚轮事件。 | false | |
| options.preventDefault | 是否屏蔽默认事件。 | true | |
| options.scrollbars | 是否显示默认滚动条 | false | |
| options.scrollXoptions.scrollY | 可以设置 IScroll 滚动的初始位置 | 0 | |
| options.tap | 是否启用自定义的 tap 事件 可以自定义 tap 事件名 | false | |
| 滚动条Scrollbars | options.scrollbars | 是否显示默认滚动条 | false |
| options.fadeScrollbars | 是否渐隐滚动条，关掉可以加速 | true | |
| options.interactiveScrollbars | 用户是否可以拖动滚动条 | false | |
| options.resizeScrollbars | 是否固定滚动条大小，建议自定义滚动条时可开启。 | false | |
| options.shrinkScrollbars | 滚动超出滚动边界时，是否收缩滚动条。‘clip’：裁剪超出的滚动条 ‘scale’: 按比例的收缩滚动条（占用 CPU 资源） false: 不收缩， | false | |
| options.indicators | 指示 IScroll 该如何滚动， Scrollbars 的底层实现方式。 | ||
| options.indicators.el | 制定滚动条的容 器。容器中的第一个元素即为指示器。例如： indicators: { el: document.getElementById(‘indicator’) } indicators: { el: ‘#indicator’ } | ||
| options.indicators.ignoreBoundaries | 是否忽略容器边界。设为 true 可以设置滚动速度 | false | |
| options.indicators.listenXoptions.indicators.listenY | 指示器监听那个方向的滚动，可以设置为一个方向或 2 个方向 | true | |
| options.indicators.speedRatioXoptions.indicators.speedRatioY | 指示器相对主滚动条的速度 | 0 | |
| options.indicators.fadeoptions.indicators.interactive options.indicators.resize options.indicators.shrink | 如 scrollbars 的设置 | ||
| options.probeType | 需要使用 iscroll-probe.js 才能生效 probeType ： 1 滚动不繁忙的时候触发 probeType ： 2 滚动时每隔一定时间触发 probeType ： 3 每滚动一像素触发一次 | ||
| 分割页面 snap | options.snap | 自动分割容器，用于制作走马灯效果等。Options.snap:true//根据容器尺寸自动分割 Options.snap:el// 根据元素分割 | false |
| 缩放zoom | options.zoom | 是否打开缩放最好使用 iscroll-zoom.js 如放大模糊，可将源容器定义为 2 倍大小，然后 scale(0.5) | false |
| options.zoomMax | 最大缩放等级 | 4 | |
| options.zoomMin | 最小缩放等级 | 1 | |
| options.zoomStart | 初始缩放等级 | 1 | |
| options.wheelAction | 滚轮动作设为’zoom’，可以用滚轮缩放 | undefined | |
| 更多设置 | options.bindToWrapper | 光标、触摸超出容器时，是否停止滚动 | false |
| options.bounceEasing | 弹力动画效果预置效果： ‘quadratic’, ‘circular’, ‘back’, ‘bounce’, ‘elastic’ （最后两个不能通过 css3 表现） 还可以自定义效果 bounceEasing: { style: ‘cubic-bezier(0,0,1,1)’,// 时 fn: function (k) { return k; }// 不使用 css3 ，使用 requestAnimationFrame 时 } | ‘circular’ | |
| options.bounceTime | 弹力动画持续的毫秒数 | 600 | |
| options.deceleration | 滚动动量减速越大越快，建议不大于 0.01 | 0.0006 | |
| options.mouseWheelSpeed | 鼠标滚轮速度 | ||
| options.preventDefaultException | 列出哪些元素不屏蔽默认事件； | {tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } | |
| options.resizePolling | 重新调整窗口大小时，重新计算 IScroll 的时间间隔 | 60 | |
| 键位绑定 | options.keyBindings | 监听按键事件控制 IScroll 例如： keyBindings: { pageUp: 33, pageDown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40 } |
API:
| 所属 | 方法名 | 说明 |
| 滚动 | scrollTo(x, y, time, easing) | 滚动到： x ， y ，事件， easing 方式 x:int y:int time:int Easing: quadratic | circular | back | bounce | elastic 见 IScroll.utils.ease 对象 例： myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic); |
| scrollBy(x, y, time, easing) | 滚动到相对于当前位置的某处其余同上 | |
| scrollToElement(el, time, offsetX, offsetY, easing) | 滚动到某个元素。 el 为必须的参数offsetX/offsetY ：相对于 el 元素的位移。设为 true 即为屏幕中心 | |
| 分割页面 snap | goToPage(x, y, time, easing) | 根据 options.snap 分割页面，跳转到横向、纵向某页。 XY 可以同时生效。 结合 options.snap 使用 |
| next()prev() | 上一页，下一页结合 options.snap使用 | |
| 缩放 | zoom(scale, x, y, time) | 缩放容器Scale: 缩放因子 |
| 刷新 | refresh() | 刷新 IScroll |
| 销毁 | destroy() | 销毁 IScroll ，节省资源 |
事件使用：
| beforeScrollStart | 用户点击屏幕，但是还未初始化滚动前 |
| scrollCancel | 初始化滚动后又取消 |
| scrollStart | 开始滚动 |
| scroll | 滚动中 |
| scrollEnd | 滚动结束 |
| flick | 轻击屏幕左、右 |
| zoomStart | 开始缩放 |
| zoomEnd | 缩放结束 |
IScroll的属性：
| myScroll.x/y | 当前位置 |
| myScroll.directionX/Y | 上一次的滚动方向 (-1 下 / 右 , 0 保持原状 , 1 上 /左 ) |
| myScroll.currentPage | 当前 Snap 信息 |
| myScroll.maxScrollXmyScroll.maxScrollY | 当滚动到底部时的 myScroll.x/y |
官网：
GitHub：
更多参数：