JQuery插件iScroll实现下拉刷新，滚动翻页特效
投稿：hebedich
字体：[ ] 类型：转载 时间：
下拉自动加载进行分页的运用越来越多，比起传统的分页该方法分页用户体验更好，布局也更简单了。目前正在使用和学习中……
JQuery插件：iScroll
页面布局：
&div id="wrapper"&
&div id="scroller"&
&div id="pullDown"&
&span class="pullDownIcon"&&/span&&span class="pullDownLabel"&下拉刷新...&/span&
&ul id="thelist"&
&img src="img/page1_img1.jpg" /&
&img src="img/page1_img2.jpg" /&
&img src="img/page1_img3.jpg" /&
&img src="img/page1_img1.jpg" /&
&img src="img/page1_img2.jpg" /&
&img src="img/page1_img3.jpg" /&
&div id="pullUp"&
&span class="pullUpIcon"&&/span&&span class="pullUpLabel"&上拉加载更多...&/span&
翻页，是通过ajax请求，把页码传入一般处理程序，在一般处理程序中获得分页后的数据返回json数组对象。
下拉刷新：
* 下拉刷新 （自定义实现此方法）
* myScroll.refresh(); // 数据加载完成后，调用界面更新方法
function pullDownAction() {
setTimeout(function () {
var el, li,
el = document.getElementById('thelist');
//==========================================
type: "GET",
url: "LoadMore.ashx",
data: { page: generatedCount },
dataType: "json",
success: function (data) {
var json =
$(json).each(function () {
li = document.createElement('li');
// li.innerText = 'Generated row ' + (++generatedCount);
li.innerHTML = '&img src="' + this.src + '"/&';
el.insertBefore(li, el.childNodes[0]);
myScroll.refresh(); //数据加载完成后，调用界面更新方法
Remember to refresh when contents are loaded (ie: on ajax completion)
// &-- Simulate network congestion, remove setTimeout from production!
function pullUpAction() {
setTimeout(function () {
var el, li,
el = document.getElementById('thelist');
//==========================================
type: "GET",
url: "LoadMore.ashx",
data: { page: generatedCount },
dataType: "json",
success: function (data) {
var json =
$(json).each(function () {
li = document.createElement('li');
li.innerText = 'Generated row ' + (++generatedCount);
li.innerHTML = '&img src="' + this.src + '"/&;
el.insertBefore(li, el.childNodes[0]);
//============================================
myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // &-- Simulate network congestion, remove setTimeout from production!
* 初始化iScroll控件
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetH
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetH
myScroll = new iScroll('wrapper', {
scrollbarClass: 'myScrollbar', /* 重要样式 */
useTransition: false,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
onScrollMove: function () {
if (this.y & 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
this.minScrollY = 0;
} else if (this.y & 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownO
} else if (this.y & (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
this.maxScrollY = this.maxScrollY;
} else if (this.y & (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
this.maxScrollY = pullUpO
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
pullUpAction(); // Execute custom function (ajax call?)
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
//初始化绑定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在iscroll在使用之前必须要实例化，
document.getElementById(&wrapper&).addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(self.loaded,300); }, false);
loaded:function(){
var self = this;
var maxHei;
myScroll = new iScroll('wrapper', {
mouseWheel: true,
tap: true ,
onScrollMove:function(){
maxHei = this.y;
onScrollEnd:function(){
if(!self.loadingShow && !self.lately){
self.page++;
$(&#wrapper&).css(&top&,&2.13rem&);
self.getStoreAndStaff(mchId,self.provinceId,self.cityId,self.areaId);
checkDOMChanges:true
1.只有wrapper里的第一个子元素才可以滚动，如果想要更多元素可以滚动，可以将需要滚动的元素放到第一个子元素下面
&div id=&wrapper&&
&div id=&scroller&&
2.使用vue时，获取了数据，但是数据还没有在页面上展现出来，DOM还没改变时，调用iscroll.refresh()无效，需要使用setTimeOut设置延迟。
3.iscroll 变态的将iscroll DOM click事件全部禁止了，解决方法修改iscroll.js&
onBeforeScrollStart方法和_end方法
/*onBeforeScrollStart: function (e) { e.preventDefault(); },*/
onBeforeScrollStart:function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'IMG' )
e.preventDefault();
that.doubleTapTimer = setTimeout(function () {
that.doubleTapTimer = null;
// Find the last touched element
target = point.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'IMG' ) {
ev = document.createEvent('MouseEvents');
ev.initMouseEvent('click', true, true,
e.view, 1,point.screenX,
point.screenY, point.clientX,
point.clientY,e.ctrlKey,
e.altKey, e.shiftKey,
e.metaKey,0, null);
ev._fake = true;
target.dispatchEvent(ev);
/*ev = doc.createEvent('MouseEvents');
ev.initMouseEvent('click', true, true, e.view, 1,
point.screenX, point.screenY, point.clientX, point.clientY,
e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
ev._fake =
target.dispatchEvent(ev);*/
}, that.options.zoom ? 250 : 0);
本文已收录于以下专栏：
相关文章推荐
最近开发的Vue项目中遇到了滑动手势，选用iscroll作为滑动库，因为iscroll直接操作dom，于是封装为Vue的指令来使用。本来想着开发过程会很顺利，但还是遇到了一些问题。在这里记录下问题和解...
Chrome浏览器非常强大，使用Chrome浏览器对页面性能进行检测，根据测试的结果进行优化。当然这个结果只是参考，在实际的项目中肯定有特殊情况存在，并不能为了满足某项测试结果而忽略特定情况的存在。
...
1、iScroll v4.2及以下版本，在安卓手机中会有一些滑动不流畅，快速滑动时候，突然再次点击滑动，会有闪屏现象出现，更换iScroll v4.2.5及以上版本即可解决；
2、利用ajax进行数...
const router = new VueRouter({
path: '/foo',
component: Foo,
iscroll实现下拉刷新，上拉加载
上一篇主要是描述iscroll 初始化的参数，以及如何开始初始化一个iscroll实例。 
那么这篇文章是来描述如何使用 iscroll 提供的API，以及一些没有提供的功能，如何通过参数来控制is...
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)每多学一点知识，就少写一行代码。
iscroll 5.1.3中文文档
原创文章，转载请注明出处
iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller.
iScroll 是一个高性能，低消耗，无依赖，跨平台的javascript滚动器。
It works on desktop, mobile and smart TV. It has been vigorously optimized for performance and size so to offer the smoothest result on modern and old devices alike.
它工作在PC，移动端，和智能电视。它有力地优化了性能和大小，使得在新旧设备上同样提供最平滑的效果。
iScroll does not just scroll. It can handle any element that needs to be moved with user interaction. It adds scrolling, zooming, panning, infinite scrolling, parallax scrolling, carousels to your projects and manages to do that in just 4kb. Give it a broom and it will also clean up your office.
iScroll不仅仅是滚动。他处理很多需要与用户交互时需要被移动的元素。它仅仅只有4K，就能在你项目管理中增加滚动，缩放，平移，滚动加载，视差滚动，旋转功能。给它一个支点，它为你撬动地球。
Even on platforms where native scrolling is good enough, iScroll adds features that wouldn't be possible otherwise. Specifically:
Granular control over the scroll position, even during momentum. You can always get and set the x,y coordinates of the scroller.
Animation can be customized with user defined easing functions (bounce, elastic, back, ...).
You can easily hook to a plethora of custom events (onBeforeScrollStart, onScrollStart, onScroll, onScrollEnd, flick, ...).
Out of the box multi-platform support. From older Android devices to the latest iPhone, from Chrome to Internet Explorer.
即使在平台中提供了足够好的原生滚动,iScroll添加了其他方法不太可能提供的特性，特别是：
颗粒化控制滚动位置，即使在运动过程中。你也能获取和设置滚动器的x,y坐标。
动画能够订做用户自定义的缓动函数（弹跳，弹性，回退，……）。
你能够容易地钩住相关事件(onBeforeScrollStart, onScrollStart, onScroll, onScrollEnd, flick, ...).
跳出限制地支持多平台。从老的安卓设备到最新的苹果手机，从Chome到IE。
The many faces of iScroll
iScroll的多面性
iScroll is all about optimization. To reach the highest performance it has been divided into multiple versions. You can pick the version that better suits your need.
Currently we have the following fragrances:
iScroll性能优化优先。为了达到最高性能，它被分为多个版本。你可以选择那一个最适合你的需要的版本。
当前我们有如下版本：
iscroll.js, it is the general purpose script. It includes the most commonly used features and grants very high performance in a small footprint.
iscroll-lite.js,
it is a stripped down version of the main script. It doesn't support snap, scrollbars, mouse wheel, key bindings. But if all you need is scrolling (especially on mobile) iScroll lite is the smallest, fastest solution.
iscroll-probe.js, probing the current scroll position is a demanding task, that's why I decided to build a dedicated version for it. If you need to know the scrolling position at any given time, this is the iScroll for you. (I'm making some more tests, this might end up in the regular iscroll.js script, so keep an eye on it).
iscroll-zoom.js, adds zooming to the standard scroll.
iscroll-infinite.js, can do infinite and cached scrolling. Handling very long lists of elements is no easy task for mobile devices. iScroll infinite uses a caching mechanism that lets you scroll a potentially infinite number of elements.
iscroll.js, 它是通常用途的脚本。它使用相当小的脚本量包含了最通用的特性，提供非常高的性能
iscroll-lite.js,
它是从主脚本剥离下来的版本。它不支持拉伸，滚动条，鼠标滚轮，键盘绑定。但是如果你仅仅只需求滚动（特别是在移动端）轻量级iScroll是最小的，最快的解决方案。
iscroll-probe.js,探索当前滚动的位置是一件吃力的事情，这是为什么我要决定为它建立一个专用的版本。如果你需要在特定的时间知道滚动的位置，这是为你准备的iScroll。(我正在做更多事情，这样可能要结束当前的iScroll.js脚本,特别留言）
iscroll-zoom.js, 在标准scroll中增加缩放.
iscroll-infinite.js, 能够做无限和缓存滚动。处理非常长的元素列表在移动端不是很容易实现。无限iScroll 使用缓存机制，使得你有可能滚动无限数量的元素。
Getting started
So you want to be an iScroll master. Cool, because that is what I'll make you into.
如果你想成为iScroll的主人。太棒了，因为我将带你进入它的世界。
The best way to learn the iScroll is by looking at the demos. In the archive you'll find a demo folder stuffed with examples. Most of the script features are outlined there.
学习iScroll最好的方法是查阅范例。在你得到的源码里，你能够找到demo文件夹，它塞满了各种案例。大多数脚本的特性都罗列在那里了。
IScroll is a class that needs to be initiated for each scrolling area. There's no limit to the number of iScrolls you can have in each page if not that imposed by the device CPU/Memory.
Try to keep the DOM as simple as possible. iScroll uses the hardware compositing layer but there's a limit to the elements the hardware can handle.
The optimal HTML structure is:
IScroll是一个类，所以需要为每个滚动域初始化。它没有限制各个页面滚动域的数量，只要你设备的CPU和内存够给力。
尝试让DOM尽量简单。iScroll使用了硬件合成层，但是硬件处理元素有一个极限。
最佳的html结构是这样的：
&div id="wrapper"&
&li&...&/li&
&li&...&/li&
iScroll must be applied to the wrapper of the scrolling area. In the above example the UL element will be scrolled. Only the first child of the container element is scrolled, additional children are simply ignored.
iscroll 必须应用于滚动区域的外层。在上面的案例中，UL元素将会被滚动。只有容器的第一个子元素会被滚动，其他的子元素将会被简单忽视。
box-shadow, opacity, text-shadow and alpha channels are all properties that don't go very well together with hardware acceleration. Scrolling might look good with few elements but as soon as your DOM becomes more complex you'll start experiencing lag and jerkiness.
box-shadow, opacity, text-shadow 和alpha 通道等这些属性是无法很好的放在一起实现硬件加速。多个元素的滚动可能很好看，但是你的DOM变得更复杂，你将会还是觉得延迟和抖动。
Sometimes a background image to simulate the shadow performs better than box-shadow. The bottom line is: experiment with CSS properties, you'll be surprised by the difference in performance a small CSS change can do.
有时候一个背景图片去模仿阴影效果比box-shadow更好。总结：实验css性能，你将惊讶一个css小小的一个改动将影响性能。
The minimal call to initiate the script is as follow:
最简约的启动脚本，如下：
&script type="text/javascript"&
var myScroll = new IScroll('#wrapper');
The first parameter can be a string representing the DOM selector of the scroll container element OR a reference to the element itself. The following is a valid syntax too:
第一个参数可以是一个代表滚动容器元素的DOM选择器的字符串，或者引用一个元素它本身。下面也是合法的语法：
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
So basically either you pass the element directly or a string that will be given to querySelector. Consequently to select a wrapper by its class name instead of the ID, you'd do:
基本上你要么直接传一个元素或者一个jquery选择器字符串。因此使用类名替代ID选择容器，你可以这样做：
var myScroll = new IScroll('.wrapper');
Note that iScroll uses querySelector not querySelectorAll, so only the first occurrence of the selector is used. If you need to apply iScroll to multiple objects you'll have to build your own cycle.
You don't strictly need to assign the instance to a variable (myScroll), but it is handy to keep a reference to the iScroll.
For example you could later check the scroller position or unload unnecessary events when you don't need the iScroll anymore.
注意，Iscroll使用jquery选择器，而非所有的jquery选择器，所以只有第一个出现的选择器被使用。如果你需要把iscroll应用于多个对象，你将必须建立自己的循环。
你不需要严格把实例指向一个变量（myScroll），但它为引用iscroll提供了便利。
例如你能够在后面操作中检查scroller的位置，或者当你不需要iscroll时，卸载不需要的事件。
Initialization
The iScroll needs to be initiated when the DOM is ready. The safest bet is to start it on window onload event. DOMContentLoaded or inline initialization are also fine but remember that the script needs to know the height/width of the scrolling area. If you have images that don't have explicit width/height declaration, iScroll will most likely end up with a wrong scroller size.
当DOM加载完毕后iscroll需要被初始化。最安全的是在window onload事件中启动它。DOMContentLoaded或者内敛初始化也是可以的，但是记得脚本需要知道滚动区域的高和宽。如果你有图片没有明确的宽高声明，那么iscroll将很可能以错误的滚动尺寸结束。
Add position:relative or absolute to the scroll container (the wrapper). That alone usually solves most of the problems with wrongly calculated wrapper dimensions.
To sum up, the smallest iScroll configuration is:
添加定位:给滚动容器添加相对或者绝对定位。哪常常就能解决绝大多数计算容器尺寸的错误的问题。
总结起来，最小的iscroll配置如下：
&script type="text/javascript" src="iscroll.js"&&/script&
&script type="text/javascript"&
function loaded() {
myScroll = new IScroll('#wrapper');
&body onload="loaded()"&
&div id="wrapper"&
&li&...&/li&
&li&...&/li&
Refer to the
for more details on the minimal CSS/HTML requirements.
If you have a complex DOM it is sometimes smart to add a little delay from the onload event to iScroll initialization. Executing the iScroll with a 100 or 200 milliseconds delay gives the browser that little rest that can save your ass.
参考得到更多最小的css和html需求的细节。
如果你的DOM相当复杂，在onload的事件到初始化iscroll之间添加一个延迟事件，是比较明智的。延迟100毫秒到200毫秒执行iscroll，给浏览器一些休息时间来解决你的麻烦。
Initialization
iScroll can be configured by passing a second parameter during the initialization phase.
iScroll在初始化阶段通过第二个参数进行配置
var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
The example above turns on mouse wheel support and scrollbars.
After initialization you can access the normalized values from the options object. Eg:
上面的例子打开了鼠标滚轮支持和滚动条。
在初始化完成之后，你能够通过options对象使用标准化的值。例如：
console.dir(myScroll.options);
The above will return the configuration the myScroll instance will run on. By normalized I mean that if you set useTransform:true (for example) but the browser doesn't support CSS transforms, useTransform will be false.
上述将返回配置，myScroll实例将继续运行。在我说的标准中，如果你设置了useTransform:true (举个例子)，但是浏览器不支持css的transforms，那么useTransform将自动变成false。
Understanding the core
iScroll uses various techniques to scroll based on device/browser capability. Normally you don't need to configure the engine, iScroll is smart enough to pick the best for you.
iScroll基于设备/浏览器的能力使用多种技术来实现滚动。通常你不需要配置引擎，iScroll足够机智地为你选择最好的。
Nonetheless it is important to understand which mechanisms iScroll works on and how to configure them.
然而知道iScroll的运行机制和如何配置它是重要的。
options.useTransform
By default the engine uses the transform CSS property. Setting this to false scrolls like we were in 2007, ie: using the top/left (and thus the scroller needs to be absolutely positioned).
This might be useful when scrolling sensitive content such as Flash, iframes and videos, but be warned: performance loss is huge.
Default: true
默认，引擎使用transform CSS属性。如果设置为false,scrolls将像2007年时，即：使用top/left实现（那么scroller需要被绝对定位）。
当滚动敏感内容，像Flesh,iframs和视频时可能有用，但是需要注意的是：这样性能会被大幅度降低。
默认: true
options.useTransition
iScroll uses CSS transition to perform animations (momentum and bounce). By setting this to false, requestAnimationFrame is used instead.
On modern browsers the difference is barely noticeable. On older devices transitions perform better.
Default: true
iScroll使用CSS的transition来实现动画（运动和弹跳）。如果设置它为false,requestAnimationFrame将替代它
在现代浏览器中区别不大，在较老的设备中过渡实现的更好。
默认: true
options.HWCompositing
This option tries to put the scroller on the hardware layer by appending translateZ(0) to the transform CSS property. This greatly increases performance especially on mobile, but there are situations where you might want to disable it (notably if you have too many elements and the hardware can't catch up).
Default: true
If unsure leave iScroll decide what's the optimal config. For best performance all the above options should be set to true (or better leave them undefined as they are set to true automatically). You may try to play with them in case you encounter hiccups and memory leaks.
这个选项尝试通过把CSS属性transform设置为translateZ(0)把滚动器置于硬件层。这样能够很大程度提高性能，特别是在移动端。但是存在一种情况是你想要禁用它（如果你有太多的元素，并且硬件跟不上）。
默认: true
如果你不确定决定留下哪些iScroll的最优选项。为了最优的性能，上述的选项最好设为true(或者最好把他们设为undefined,那么它们自动被设为true)。你可以试着跟他们玩,以防你遇到未知错误和内存泄漏。
Basic features
options.bounce
When the scroller meets the boundary it performs a small bounce animation. Disabling bounce may help reach smoother results on old or slow devices.
Default: true
当滚动器遇到边界时，执行一个小的弹跳动画。禁用弹跳，可能帮助在旧的或者慢的设备上实现更平滑。
默认: true
options.click
To override the native scrolling iScroll has to inhibit some default browser behaviors, such as mouse clicks. If you want your application to respond to the click event you have to explicitly set this option to true. Please note that it is suggested to use the custom tap event instead (see below).
Default: false
为了重写原始的滚动iScroll必须禁用一些浏览器默认的行为，例如鼠标点击。如果你想要你的应用响应点击事件，你必须特别地设置这个选项为true.请注意，建议使用订做的tap事件来代替它（参照下面）。
默认: false
options.disableMouse
options.disablePointer
options.disableTouch
By default iScroll listens to all pointer events and reacts to the first one that occurs. It may seem a waste of resources but feature detection has proven quite unreliable and this listen-to-all approach is our safest bet for wide browser/device compatibility.
If you have an internal mechanism for device detection or you know in advance where your script will run on, you may want to disable all event sets you don't need (mouse, pointer or touch events).
For example to disable mouse and pointer events:
Default: false
iScroll默认侦听所有手势事件和响应第一个出现那个事件。它看似可能浪费资源，但是特征探测被证明有些不靠谱并且这个监听所有的方法是我们浏览器设备广兼容性最安全的方案。
如果你有设备检测的内部机制或者你事先知道脚本将运行在什么环境，你可以禁止所有你不需要的事件（鼠标，指针或者触摸事件）。
例如禁止鼠标和指针事件：
默认: false
var myScroll = new IScroll('#wrapper', {
disableMouse: true,
disablePointer: true
options.eventPassthrough
Sometimes you want to preserve native vertical scroll but being able to add an horizontal iScroll (maybe a carousel). Set this to true and the iScroll area will react to horizontal swipes only. Vertical swipes will naturally scroll the whole page.
on a mobile device. Note that this can be set to 'horizontal' to inverse the behavior (native horizontal scroll, vertical iScroll).
有时候你想要保留原始的纵向滚动，但是能够增加一个横向iScroll（可能是一个传送带）。设置它为true，iScroll将会仅仅响应横向的动作。整个页面中的纵向动作原始不变。
在移动设备查看的案例。注意这个能够被设置为'horizontal'来反置行为（横向原始滚动，纵向iScroll滚动）
options.freeScroll
This is useful mainly on 2D scrollers (when you need to scroll both horizontally and vertically). Normally when you start scrolling in one direction the other is locked.
Sometimes you just want to move freely with no constrains. In these cases you can set this option to true. See 2D scroll demo.
Default: false
这个主要用于2D滚动（当你需要同时滚动横坐标和纵坐标）。通常当你开始滚动一个方向时，另一个方向是锁定的。
有时候你紧紧想要没有约束地只有运动。这种情况下你可以设置它为true.请查看2D scroll demo.
默认: false
options.keyBindings
Set this to true to activate keyboard (and remote controls) interaction. See the Key bindings section below for more information.
Default: false
设置这个为true，使得能够通过键盘（远端控制）互动。可以查阅下面Key bindings章节获取更多信息。
默认: false
options.invertWheelDirection
Meaningful when mouse wheel support is activated, in which case it just inverts the scrolling direction. (ie. going down scrolls up and vice-versa).
Default: false
顾名思义，当支持鼠标滚轮时，在这种情况下，它仅仅反置滚动方向（即，鼠标往下滚，页面往上滚。反义亦然。）
默认: false
options.momentum
You can turn on/off the momentum animation performed when the user quickly flicks on screen. Turning this off greatly enhance performance.
Default: true
当你快速拖动屏幕，你能够关闭或者打开惯性运动的执行。关闭它能够极大地提升性能。
默认: true
options.mouseWheel
Listen to the mouse wheel event.
Default: false
侦听鼠标滚轮事件
默认: false
options.preventDefault
Whether or not to preventDefault() when events are fired. This should be left true unless you really know what you are doing.
See preventDefaultException in the Advanced features for more control over the preventDefault behavior.
Default: true
当事件被触发，是否阻止默认事件。你应该保持它为true，除非你知道在干什么。
参照高级特性preventDefaultException，获取更多控制preventDefault的行为。
默认: true
options.scrollbars
Wheter or not to display the default scrollbars. See more in the Scrollbar section.
Default: false.
是否显示默认滚动条。更多信息参阅Scrollbar章节。
默认: false
options.scrollX
options.scrollY
By default only vertical scrolling is enabled. If you need to scroll horizontally you have to set scrollX to true. See .
See also the freeScroll option.
Default: scrollX: false, scrollY: true
Note that scrollX/Y: true has the same effect as overflow: auto. Setting one direction to false helps to spare some checks and thus CPU cycles.
默认只有纵向滚动是可用的。如果你需要横向滚动，你必须设置scrollX为true。参阅
也可以参阅freeScroll选项。
默认: scrollX: false, scrollY: true
注意scrollX/Y: true和overflow: auto效果是一样的。设置一个方向为false有助于节省一些检查，从而节省cpu周期。
options.startX
options.startY
By default iScroll starts at 0, 0 (top left) position, you can instruct the scroller to kickoff at a different location.
Default: false.
默认iScroll以0, 0 (top left)定位开始，你能够制定滚动器开始于其他不同的位置。
默认: false.
options.tap
Set this to true to let iScroll emit a custom tap event when the scroll area is clicked/tapped but not scrolled.
This is the suggested way to handle user interaction with clickable elements. To listen to the tap event you would add an event listener as you would do for a standard event. Example:
设置这个为true,使得当滚动区域被点击或者轻敲而非滚动时，iScroll发射一个轻敲事件。
这是推荐的处理用户可点击元素交互界面的方法。你可以添加一个事件侦听器去侦听tap事件，和你侦听标准事件没有区别。例如：
element.addEventListener('tap', doSomething, false); \\ Native
$('#element').on('tap', doSomething); \\ jQuery
You can also customize the event name by passing a string. Eg:
你也可以使用一个字符串订制一个事件名称。例如：
tap: 'myCustomTapEvent'
In this case you'd listen to myCustomTapEvent.
这样你就可以侦听myCustomTapEvent事件了。
Default: false
默认: false
Scrollbars
The scrollbars are more than just what the name suggests. In fact internally they are referenced as indicators.
An indicator listens to the scroller position and normally it just shows its position in relation to whole, but what it can do is so much more.
Let's start with the basis.
scrollbars不仅仅像它名字说提示的含义。事实上，内部它指向了指示器。
一个指示器侦听滚动器的方位和通常他仅仅显示它在整个文档中的方位。但是它所能做的更多更多。
让我们从基础开始。
options.scrollbars
As we mentioned in the Basic features section there's only one thing that you got to do to activate the scrollbars in all their splendor, and that one thing is:
浩浩荡荡我们在Basic属性章节提及的，激活滚动条，唯一一件事我们要做的事，和那个事是：
var myScroll = new IScroll('#wrapper', {
scrollbars: true
Of course the default behavior can be personalized.
当然默认行为能够被个性化设置。
options.fadeScrollbars
When not in use the scrollbar fades away. Leave this to false to spare resources.
当滚动条暂时不用时，会慢慢淡去。把它设置为false能够节省资源。
Default: false
默认: false
options.interactiveScrollbars
The scrollbar becomes draggable and user can interact with it.
滚动条变得能够拖拽，并且用户能够和它交互。
Default: false
默认: false
options.resizeScrollbars
The scrollbar size changes based on the proportion between the wrapper and the scroller width/height. Setting this to false makes the scrollbar a fixed size. This might be useful in case of custom styled scrollbars (see below).
滚动条大小改变是基于容器和滚动器的宽高比例。设置它为false,使得滚动条固定大小。当自定义滚动条时可能有用（查看下面）。
Default: true
默认: true
options.shrinkScrollbars
When scrolling outside of the boundaries the scrollbar is shrunk by a small amount.
Valid values are: 'clip' and 'scale'.
'clip' just moves the indicator outside of its container, the impression is that the scrollbar shrinks but it is simply moving out of the screen. If you can live with the visual effect this option immensely improves overall performance.
'scale' turns off useTransition hence all animations are served with requestAnimationFrame. The indicator is actually varied in size and the end result is nicer to the eye.
Default: false
当滚动出滚动条的边界时滚动条少量收缩。
可选的值有: 'clip' 和 'scale'.
'clip' 仅仅移动指示器超出容器，这个效果是，滚动条发生收缩，但是它仅仅简单的移动出屏幕。如果你能够忍受这样的视觉效果，这个选项会极大提升整体的性能。
'scale'关闭useTransition，因此所有的动画都由requestAnimationFrame提供。滚动条改变尺寸，并且视觉上效果更好。
默认: false
Note that resizing can't be performed by the GPU, so scale is all on the CPU.
If your application runs on multiple devices my suggestion would be to switch this option to 'scale', 'clip' or false based on the platform responsiveness (eg: on older mobile devices you could set this to 'clip' and on desktop browser to 'scale').
注意改变大小无法在GPU上执行，所以收缩效果都在CPU上执行。
如果你的设备运行在多路设备上，我的建议是基于平台响应能力选择'scale', 'clip' 或者 false（例如：老的移动设备中你应该设置它为'clip'，在桌面浏览器中设置为'scale').
Styling the scrollbar
设置滚动条的样式
So you don't like the default scrollbar styling and you think you could do better. Help yourself! iScroll makes dressing the scrollbar a snap. First of all set the scrollbars option to 'custom':
如果你不喜欢默认的滚动条样式，并且你觉得你能够做得更好。那么你自己做一个去！iScroll打扮滚动条易如反掌。首先设置滚动条的选项为'custom'：
var myScroll = new IScroll('#wrapper', {
scrollbars: 'custom'
Then use the following CSS classes to style the little bastards.
当使用以下css classes来样式小玩意.
.iScrollHorizontalScrollbar, this is applied to the horizontal container. The element that actually hosts the scrollbar indicator.
.iScrollVerticalScrollbar, same as above but for the vertical container.
.iScrollIndicator, the actual scrollbar indicator.
.iScrollBothScrollbars, this is added to the container elements when both scrollbars are shown. Normally just one (horizontal or vertical) is visible.
.iScrollHorizontalScrollbar, 这是应用于横向容器的样式。这个元素事实上主管滚动条的指示器。
.iScrollVerticalScrollbar, 和上面一样，但是是针对纵向容器。
.iScrollIndicator, 事实上的滚动栏上的滚动条。
.iScrollBothScrollbars, 当滚动条都显示时这个样式将被添加。通常只有一个(横向或者纵向）是可见的。
should make things clearer than my lousy explanation.
If you set resizeScrollbars: false you could make the scrollbar of a fixed size, otherwise it would be resized based on the scroller length.
Please keep reading to the following section for a revelation that will shake your world.
比我笨拙的解释来的更清晰明了。
如果你设置resizeScrollbars: false 你能够将滚动条固定尺寸，否则它将根据滚动器的长度来调整尺寸。
请阅读下面的章节获取参考，你将受益匪浅。
Indicators
All the scrollbar options above are in reality just wrappers to the low level indicators option. It looks more or less like this:
上述滚动条的选项实际上仅仅封装了底层指示器的选项。它有时候像这样:
var myScroll = new IScroll('#wrapper', {
indicators: {
el: [element|element selector]
fade: false,
ignoreBoundaries: false,
interactive: false,
listenX: true,
listenY: true,
resize: true,
shrink: false,
speedRatioX: 0,
speedRatioY: 0,
options.indicators.el
This is a mandatory parameter which holds a reference to the scrollbar container element. The first child inside the container will be the indicator. Note that the scrollbar can be anywhere on your document, it doesn't need to be inside the scroller wrapper. Do you start perceiving the power of such tool?
Valid syntax would be:
这是一个必选参数，指向滚动条容器元素。容器里面第一个子元素将是滚动条。注意滚动条能够在你文档的任何地方，它不需要内嵌在滚动器中。你准备好感受这些工具的力量了吗？
合法的语法如下：
indicators: {
el: document.getElementById('indicator')
indicators: {
el: '#indicator'
options.indicators.ignoreBoundaries
This tells the indicator to ignore the boundaries imposed by its container. Since we can alter the speed ratio of the scrollbar, it is useful to just let the scrollbar go. Say you want the indicator to go twice as fast as the scroller, it would reach the end of its run very quickly. This option is used for parallax scrolling.
Default: false
这个告诉指示器忽视强加在它的容器上的边界。当我们修改了滚动条的速率后，它让滚动条跑起来。也就是说，你想要指示器跑动速度是滚动器的两倍，它将更快到达终点。这个选项在视差滚动中有用。
Default: false
options.indicators.listenX
options.indicators.listenY
To which axis the indicator listens to. It can be just one or both.
Default: true
告诉指示器侦听哪个方向。可选一个或者两个都选。
Default: true
options.indicators.speedRatioX
options.indicators.speedRatioY
The speed the indicator moves in relation to the main scroller size. By default this is set automatically. You rarely need to alter this value.
Default: 0
相对于主滚动器尺寸，指示器移动的速度。默认，这个设置为自动。你机会不需要修改它的值。
Default: 0
options.indicators.fade
options.indicators.interactive
options.indicators.resize
options.indicators.shrink
These are the same options we explored in the scrollbars section, I'm not going to insult your intelligence and repeat them here.
Do not cross the streams. It would be bad! Do not mix the scrollbars syntax (options.scrollbars, options.fadeScrollbars, options.interactiveScrollbars, ...) with the indicators! Use one or the other.
Have a look at the
to get a glance at the power of the indicators option.
The wittiest of you would have noticed that indicators is actually plural... Yes, exactly, passing an array of objects you can have a virtually infinite number of indicators. I don't know what you may need them for, but hey! who am I to argue about your scrollbar preferences?
这些是在我们解释过的滚动条章节相同的选项。我没有打算在这里重复解释它们来侮辱您的智商。
不要脚踩两只船。这样不好！不要混合使用scrollbars语法 (options.scrollbars, options.fadeScrollbars, options.interactiveScrollbars, ...)和indicators语法。使用一个或者另一个。
看一看，在indicators选项的力量中获取灵感。
最聪明的你也许已经发现指示器成对出现。是的，正是，通过对象的数组，你能够拥有几乎无限个indicator。我不知道你拿它们来做什么，除了好玩！我才不跟你讨论滚动条的选择权。
Parallax scrolling
Parallax scrolling is just a collateral damage of the Indicators functionality.
An indicator is just a layer that follows the movement and animation applied to the main scroller. If you see it like that you'll understand the power behind this feature. To this add that you can have any number of indicators and the parallax scrolling is served.
Please refer to the .
视差滚动是仅仅一个指示器附带的一个功能。
一个指示器仅仅是一个层，应用于主滚动器，跟随着移动和动画。如果你如果你看到这些，你讲明白这个特性后面的力量。其中添加一定数量的指示器，从而形成视差滚动。
Scrolling programmatically
通过编程滚动
You silly! Of course you can scroll programmaticaly!
你太傻了!你当然可以通过编程滚动。
scrollTo(x, y, time, easing)
Say your iScroll instance resides into the myScroll variable. You can easily scroll to any position with the following syntax:
假设你的iScroll实例存储于myScroll变量中。你通过以下语法能够很简单地滚动到任意位置：
myScroll.scrollTo(0, -100);
That would scroll down by 100 pixels. Remember: 0 is always the top left corner. To scroll you have to pass negative numbers.
time and easing are optional. They regulates the duration (in ms) and the easing function of the animation respectively.
The easing functions are available in the IScroll.utils.ease object. For example to apply a 1 second elastic easing you'd do:
那样你能够向下滚动100像素。记得：0永远是左上角。滚动时，你不得不传递一个负数。
time 和 easing 是可选的。它们调节持续时间（毫秒）和特殊声明的动画缓动函数。
缓动函数是可以从IScroll.utils.ease对象中获取到。例如应用一个1秒弹性运动，你可以这样做：
myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
The available options are: quadratic, circular, back, bounce, elastic.
可得到的缓动函数有: quadratic, circular, back, bounce, elastic.
scrollBy(x, y, time, easing)
Same as above but X and Y are relative to the current position.
和上面一样，但是X和y是相对于当前位置。
myScroll.scrollBy(0, -10);
Would scroll 10 pixels down. If you are at -100, you'll end up at -110.
能够往下滚10px。如果你现在在-100，那么你将滚动到-110.
scrollToElement(el, time, offsetX, offsetY, easing)
You're gonna like this. Sit tight.
The only mandatory parameter is el. Pass an element or a selector and iScroll will try to scroll to the top/left of that element.
time is optional and sets the animation duration.
offsetX and offsetY define an offset in pixels, so that you can scroll to that element plus a the specified offset. Not only that. If you set them to true the element will be centered on screen. Refer to the scroll to element example.
easing works the same way as per the scrollTo method.
你一定很紧张。
el是唯一必选的。传入一个元素或者一个选择器，iScroll将尝试滚动到这个元素的top/left位置。
time是可选的，它设置了动画持续时间。
offsetX and offsetY define an offset in pixels, so that you can scroll to that element plus a the specified offset. Not only that. If you set them to true the element will be centered on screen. Refer to the scroll to element example.
offsetX和offsetY通过像素定义位移，使得你能够滚动到这个元素加上指定位移的位置上。不仅仅如此。如果你设置他们为true,那么这个元素将会显示在屏幕中央。参考scroll to element 的demo.
easing 的工作方式和scrollTo一样.
隔断（翻页）
iScroll can snap to fixed positions and elements.
iScroll能够隔断固定的位置和元素。
options.snap
The simplest snap config is as follow:
最简单的隔断配置如下：
var myScroll = new IScroll('#wrapper', {
snap: true
This would automatically split the scroller into pages the size of the container.
snap also takes a string as a value. The string will be the selector to the elements the scroller will be snapped to. So the following
这样自动地分割滚动器为容器大小的页。
snap也接受字符串作为值。一个元素的选择器的字符串，滚动器将根据这个元素进行分割。如下：
var myScroll = new IScroll('#wrapper', {
snap: 'li'
would snap to each and every LI tag.
To help you navigate through the snap points iScroll grants access to a series of interesting methods.
能够由每个li标签进行隔断。
为了帮你导航隔断点，iScroll允许使用一系列有趣的方法。
goToPage(x, y, time, easing)
x and y represent the page number you want to scroll to in the horizontal or vertical axes (yeah, it's the plural of axis, I checked). If the scroller in mono-dimensional, just pass 0 to the axis you don't need.
time is the duration of the animation, easing the easing function used to scroll to the point. Refer to the option.bounceEasing in the Advanced features. They are both optional.
x和y代表你想要滚动到的横轴或者纵轴页面的页码（是的，我帮你检查过了，只有两个轴）。如果你在一维界面中滚动，只需要在你不需要的轴传入0。
time是动画的持续时间，easing是缓动函数用来滚动到某个点。参照option.bounceEasing的option.bounceEasing。它们都是可选的。
myScroll.goToPage(10, 0, 1000);
This would scroll to the 10th page on the horizontal axis in 1 second.
这将在一秒内横轴滚动到第十页。
Go to the next and previous page based on current position.
基于当前位置，跳转到下一页和上一页。
To use the pinch/zoom functionality you better use the iscroll-zoom.js script.
为了使用pinch（捏）和zoom（缩放）功能，你最好使用iscroll-zoom.js脚本(译者注：事实证明，必须使用)。
options.zoom
Set this to true to activate zoom.
Default: false
设置这个为true来激活缩放功能
默认: false
options.zoomMax
Maximum zoom level.
Default: 4
最大缩放级别。
options.zoomMin
Minimum zoom level.
Default: 1
最小缩放级别。
options.zoomStart
Starting zoom level.
Default: 1
开始缩放级别。
options.wheelAction
Wheel action can be set to 'zoom' to have the wheel regulate the zoom level instead of scrolling position.
Default: undefined (ie: the mouse wheel scrolls)
To sum up, a nice zoom config would be:
Wheel action可以设置为'zoom'，使得滚轮调节缩放等级来代替原先的滚动位置功能。
默认: undefined (即: 鼠标滚轮控制滚动)
总结起来，一个好的缩放配置可以像这样:
myScroll = new IScroll('#wrapper', {
zoom: true,
mouseWheel: true,
wheelAction: 'zoom'
The zoom is performed with CSS transform. iScroll can zoom only on browsers that support that.
Some browsers (notably webkit based ones) take a snapshot of the zooming area as soon as they are placed on the hardware compositing layer (say as soon as you apply a transform to them). This snapshot is used as a texture for the zooming area and it can hardly be updated. This means that your texture will be based on elements at scale 1 and zooming in will result in blurred, low definition text and images.
A simple solution is to load content at double (or triple) its actual resolution and scale it down inside a scale(0.5) div. This should be enough to grant you a better result. I hope to be able to post more demos soon
Refer to the .
缩放由CSS的transform执行。只有当浏览器支持它时iScroll才能够进行缩放。
一些浏览器（特别是基于webkit的）一旦你放置于硬件合成层，就拍缩放区域的快照。快照用于用于缩放区域的本体，并且它几乎不被更新。这意味着你的本质将基于缩放等级为1时的元素，并且缩放结果将是模糊不清，低清晰度的文字和图片。
一个简单的解决方案是加载内容三倍（或两倍）的它本身的分辨率，并且缩小他进scale(0.5)的div中。这样足够给你一个更好的结果。我希望能够在不久将来给你更多的demo.
zoom(scale, x, y, time)
Juicy method that lets you zoom programmatically.
scale is the zoom factor.
x and y the focus point, aka the center of the zoom. If not specified, the center of the screen will be used.
time is the duration of the animation in milliseconds (optional).
让你能够通过编程缩放的生动方法。
scale是缩放因素。
x和y强制点，又称缩放中心。如果没有指定，将使用屏幕的中心。
time是动画持续时间的毫秒数（可选）.
Infinite scrolling
iScroll integrates a smart caching system that allows to handle of a virtually infinite amount of data using (and reusing) just a bunch of elements.
Infinite scrolling is in an early stage of development and although it can be considered stable, it is not ready for wide consumption.
Please review the
and send your suggestions and bug reports.
I will add more details as soon as the functionality evolves.
iScroll集成了一个智能缓存系统，使用（复用）仅仅一群元素，允许处理几乎无限数量的数据。
无限滚动是开发的早期阶段，尽管它被认为是稳定的，但不准备广泛使用。
请查阅，并且发送您的建议和错误报告。
我将增加更多功能更新的细节。
Advanced options
For the hardcore developer.
针对骨灰级开发者。
options.bindToWrapper
The move event is normally bound to the document and not the scroll container. When you move the cursor/finger out of the wrapper the scrolling keeps going. This is usually what you want, but you can also bind the move event to wrapper itself. Doing so as soon as the pointer leaves the container the scroll stops.
Default: false
移动事件通常边界限制于document而不是滚动的内容。当你移动光标或者手指超出wrapper时，仍然继续滚动。这通常是你想要的，但是也可以绑定移动事件到wrapper本身。这样做，当你移动出内容时，滚动将停止。
默认: false
options.bounceEasing
Easing function performed during the bounce animation. Valid values are: 'quadratic', 'circular', 'back', 'bounce', 'elastic'. See the , drag the scroller down and release.
bounceEasing is a bit smarter than that. You can also feed a custom easing function, like so:
弹跳动画期间，缓动函数被执行。可能的值是：'quadratic', 'circular', 'back', 'bounce', 'elastic'. 查看，拖动滚动器到最底下然后放开。
bounceEasing 比这个更智能。你也能够提供一个自定义的缓动函数，像这样:
bounceEasing: {
style: 'cubic-bezier(0,0,1,1)',
fn: function (k) { }
The above would perform a linear easing. The style option is used every time the animation is executed with CSS transitions, fn is used with requestAnimationFrame. If the easing function is too complex and can't be represented by a cubic bezier just pass '' (empty string) as style.
Note that bounce and elastic can't be performed by CSS transitions.
Default: 'circular'
上面的例子将执行一个线性缓动。style选项用于每当使用CSS transitions执行动画，fn用于requestAnimationFrame。如果缓动函数太复杂，无法用贝塞尔函数表示，只需要在style传入""(空字符串)。
注意弹跳和弹性无法用CSS transitions执行。
默认: 'circular'
options.bounceTime
Duration in millisecond of the bounce animation.
Default: 600
弹跳动画持续的毫秒数。
options.deceleration
This value can be altered to change the momentum animation duration/speed. Higher numbers make the animation shorter. Sensible results can be experienced starting with a value of 0.01, bigger than that basically doesn't make any momentum at all.
Default: 0.0006
这个值能够被修改，用来改变惯性运动持续时间/速度。越高的数字让运动更短。 合理的结果通常开始于0.01，比这个大，基本上将不再产生惯性运动。
默认: 0.0006
options.mouseWheelSpeed
Set the speed of the mouse wheel.
Default: 20
设置鼠标滚轮的速度
options.preventDefaultException
These are all the exceptions when preventDefault() would be fired anyway despite the preventDefault option value.
This is a pretty powerful option, if you don't want to preventDefault() on all elements with formfield class name for example, you could pass the following:
Default: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }.
这些是例外，当preventDefault()被触发时，从preventDefault选项里排除掉
这是相当强大的选项，如果你不想要preventDefault()所有的例如类名为formfield元素，你可以传入如下:
preventDefaultException: { className: /(^|\s)formfield(\s|$)/ }
默认: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }.
options.resizePolling
When you resize the window iScroll has to recalculate elements position and dimension. This might be a pretty daunting task for the poor little fella. To give it some rest the polling is set to 60 milliseconds.
By reducing this value you get better visual effect but the script becomes more aggressive on the CPU. The default value seems a good compromise.
Default: 60
当你改变窗口，iScroll不得不重新计算元素的位置和尺寸。这让大家相当沮丧。给它间隔60毫秒的轮询时间。
降低这个数值，你将得到更好的视觉体验，但是脚本将侵占更多的CPU.默认的数值似乎是一个好的折中方案。
Default: 60
Mastering the refresh method
控制refresh方法
iScroll needs to know the exact dimensions of both the wrapper and the scroller. They are computed at start up but if your elements change in size, we need to tell iScroll that you are messing with the DOM.
This is achieved by calling the refresh method with the right timing. Please follow me closely, understanding this will save you hours of frustration.
Every time you touch the DOM the browser renderer repaints the page. Once this repaint has happened we can safely read the new DOM properties. The repaint phase is not instantaneous and it happens only at the end of the scope that triggered it. That's why we need to give the renderer a little rest before refreshing the iScroll.
To ensure that javascript gets the updated properties you should defer the refreh with something like this:
iScroll需要知道wrapper和scroller的实际尺寸。它们在开始时就被计算，但是如果你的元素改变了大小，我们需要告诉iScroll，我们弄乱了DOM.
这将完成在合适的时间里调用refresh方法。请紧紧跟随我，明白这些，你将少受挫几小时。
每次我们获取DOM,浏览器的渲染器重绘页面。一旦重绘发生，我们能够安全的读取DOM内容。重绘阶段不是瞬时发生的，它的发生只有在最后阶段才触发它。这是为什么我们刷新iScroll之前，需要给渲染器一段时间休息。
为了确保JavaScript获取更新后的内容，你应该如下推迟刷新一些东西：
ajax('page.php', onCompletion);
function onCompletion () {
// Update here your DOM
setTimeout(function () {
myScroll.refresh();
We have placed the refresh() call into a zero timeout. That is likely all you need to correctly refresh the iScroll boundaries. There are other ways to wait for the repaint, but the zero-timeout has proven pretty solid.
Consider that if you have a very complex HTML structure you may give the browser some more rest and raise the timeout to 100 or 200 milliseconds.
This is generally true for all the tasks that have to be done on the DOM. Always give the renderer some rest.
我们已经调用refresh()放置于0秒timeout中。这可能是所有你需要正确刷新iScroll边界。也许有其他方法来等待重绘，但是zero-timeout被证实相当可靠。
考虑当你的HTML结构很复杂，你可能需要给浏览器更多的休息时间，并且提升timeout为100或者200毫秒。
在DOM中这样做通常在所有任务中是正确的。常常给渲染器一点休息时间。
Custom events
iScroll also emits some useful custom events you can hook to.
To register them you use the on(type, fn) method.
iScroll也发射一些你能够钩住的有用订制事件。
你使用on(type, fn)方法注册他们.
myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', doSomething);
The above code executes the doSomething function every time the content stops scrolling.
The available types are:
每当容器停止滚动，上面的代码执行doSomething函数。
可利用的类型有这些:
beforeScrollStart, executed as soon as user touches the screen but before the scrolling has initiated.
scrollCancel, scroll initiated but didn't happen.
scrollStart, the scroll started.
scroll, the content is scrolling. Available only in scroll-probe.js edition. See onScroll event.
scrollEnd, content stopped scrolling.
flick, user flicked left/right.
zoomStart, user started zooming.
zoomEnd, zoom ended.
beforeScrollStart, 用户一触摸屏幕就执行，但是它在滚动开始前。
scrollCancel, 滚动开始，但是没有发生。
scrollStart, 滚动开始
scroll, 内容开始滚动。只有在scroll-probe.js版本中有效。参考onScroll事件
scrollEnd, 内容停止滚动
flick, 用户左右轻拨
zoomStart, 用户开始缩放
zoomEnd, 缩放结束
onScroll event
onScroll事件
The scroll event is available on iScroll probe edition only (iscroll-probe.js). The probe behavior can be altered through the probeType option.
scroll事件只有在iScroll的探针版本中有效（iscroll-probe.js）。探针行为能够通过probeType选项改变。
options.probeType
This regulates the probe aggressiveness or the frequency at which the scroll event is fired. Valid values are: 1, 2, 3. The higher the number the more aggressive the probe. The more aggressive the probe the higher the impact on the CPU.
probeType: 1 has no impact on performance. The scroll event is fired only when the scroller is not busy doing its stuff.
probeType: 2 always executes the scroll event except during momentum and bounce. This resembles the native onScroll event.
probeType: 3 emits the scroll event with a to-the-pixel precision. Note that the scrolling is forced to requestAnimationFrame (ie: useTransition:false).
Please see the .
这个控制探针的侵略性，或者滚动事件触发的频率。合法的值有：1,2,3.更高的数字，探针更有攻击性。探针的攻击性更高，对CPU的影响越大。
probeType: 1 不影响性能，滚动事件只有在滚动器不忙于处理这东西时才触发。
probeType: 2 除了在惯性运动和弹跳时经常被执行。这个类似原始的onScroll事件。
probeType: 3 发射像素精度的滚动事件。注意，滚动作用于 requestAnimationFrame (例如: useTransition:false).
Key bindings
You can activate support for keyboards and remote controls with the keyBindings option. By default iScroll listens to the arrow keys, page up/down, home/end but they are (wait for it) totally customizable.
You can pass an object with the list of key codes you want iScroll to react to.
The default values are as follow:
你能够通过keyBindings选项激活键盘支持和远程控制。默认iScroll侦听方向键，翻页键，home/end键，但是他们都是可定制的（就等它了）。
你能够传入你想要iScroll响应的键值列表的对象。
默认的值如下:
keyBindings: {
pageUp: 33,
pageDown: 34,
right: 39,
You can also pass a string (eg: pageUp: 'a') and iScroll will convert it for you. You could just think of a key code and iScroll would read it out of your mind.
你也能够传入一个字符串 (例如: pageUp: 'a') and iScroll 将为你转换它. 你能够仅仅想起一个键码，iScroll将为你读取它。
Useful scroller info
有用的滚动器信息
iScroll stores many useful information that you can use to augment your application.
You will probably find useful:
iScroll储存了许多有用的信息，你能够用来增强的你应用。
你大概找出它的用处:
myScroll.x/y, current position
myScroll.directionX/Y, last direction (-1 down/right, 0 still, 1 up/left)
myScroll.currentPage, current snap point info
myScroll.x/y, 当前位置
myScroll.directionX/Y, 最后的方向 (-1 向下/向右, 0 当前, 1 向上/向左)
myScroll.currentPage, 当前隔断点信息
These pieces of information may be useful when dealing with custom events. Eg:
这些是一些处理当前事件时可能有用的信息。例如：
myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', function () {
if ( this.x < -1000 ) {
// do something
The above executes some code if the x position is lower than -1000px when the scroller stops. Note that I used this instead of myScroll, you can use both of course, but iScroll passes itself as this context when firing custom event functions.
上面当滚动停止时如果x坐标点小于-1000px，则执行一些代码。注意，我使用this来代替myScroll，你当然可以都使用它们，但是当触发订制事件时，iScroll传递它本身作为上下文。
The public destroy() method can be used to free some memory when the iScroll is not needed anymore.
公共方法 destroy() 能够在iScroll不再需要时，释放一些内存。
myScroll.destroy();
myScroll =
Contributing and CLA
贡献代码和协议（原文，不再翻译）
If you want to contribute to the iScroll development, before I can accept your submission I have to ask you to sign the . Unfortunately that is the only way to enforce the openness of the script.
As an end user you have to do nothing of course. Actually the CLA ensures that nobody will even come after you asking for your first born for using the iScroll.
Please note that pull requests may take some time to be accepted. Testing iScroll is one of the most time consuming tasks of the project. iScroll works from desktop to smartphone, from tablets to smart TVs. I do not have physical access to all the testing devices, so before I can push a change I have to make sure that the new code is working everywhere.
Critical bugs are usually applied very quickly, but enhancements and coding style changes have to pass a longer review phase. Remember that this is still a side project for me.
Who is using iScroll
谁在使用iScroll（原文，不再翻译）
It's impossible to track all the websites and applications that use the iScroll. It has been spotted on: Apple, Microsoft, People, LinkedIn, IKEA, Nike, Playboy, Bose, and countless others.
License (MIT)
许可（原文，不再翻译）
Copyright (c) 2014 Matteo Spinelli, cubiq.org
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.