小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
iScroll介绍
iScroll是一个高性能，资源占用少，无依赖，跨平台的javascript上拉加载，下拉刷新的滚动插件，目前版本v5.2.0。
GitHub下载地址：github.com/cubiq/iscro…
iScroll版本
iScroll进行了不同的优化，为了达到更高的性能，iScroll分为了多个版本，你可以根据项目选择最适合的版本。
目前有以下版本：
- iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
- iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案（这个能应付大多数场景）。
- iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。
- iscroll-zoom.js，在标准滚动功能上增加缩放功能。
- iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。
iScroll使用
页面引用
<script type="text/javascript" src="iscroll.js"></script>
HTML结构
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
......
<li>...</li>
</ul>
</div>
初始化脚本
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>
配置参数说明
var myScroll = new IScroll('#wrapper', {
mouseWheel: true, //是否监听鼠标滚轮事件
scrollbars: true, //是否显示默认滚动条
preventDefault: true,//是否屏蔽默认事件
preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }, //列出哪些元素不屏蔽默认事件
probeType: 3,//需要使用 iscroll-probe.js 才能生效 probeType ： 1 滚动不繁忙的时候触发;probeType ： 2 滚动时每隔一定时间触;probeType ： 3 每滚动一像素触发一次
});
iScroll属性方法
| 功能 | 方法名 | 说明 | ||||
|---|---|---|---|---|---|---|
| 滚动 | scrollTo(x, y, time, easing) | 滚动到： x ， y ，事件， easing方式x:inty:inttime:intEasing: 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 可以同时生效。 | ||||
| next() prev() | 上一页，下一页结合 options.snap使用 | |||||
| 缩放 | zoom(scale, x, y, time) | 缩放容器Scale: 缩放因子 | ||||
| 刷新 | refresh() | 刷新 IScroll | ||||
| 销毁 | destroy() | 销毁 IScroll ，节省资源 |
iScroll事件
| 事件名称 | 说明 |
|---|---|
| beforeScrollStart | 用户点击屏幕，但是还未初始化滚动前 |
| scrollCancel | 初始化滚动后又取消 |
| scrollStart | 开始滚动 |
| scroll | 滚动中 |
| scrollEnd | 滚动结束 |
| flick | 轻击屏幕左、右 |
| zoomStart | 开始缩放 |
| zoomEnd | 缩放结束 |
iScroll 可以处理用户进行移动交互的元素：滚动，缩放，平移，无限滚动，视差滚动，旋转等功能。
温馨提示
文章内容如果写的存在问题欢迎留言指出，让我们共同交流，共同探讨，共同进步~~~
文章如果对你有帮助，动动你的小手点个赞，鼓励一下，给我前行的动力。
「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」
