1、
最佳的HTML结构如下：
- ...
- ...
...
iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。
最基本的脚本初始化的方式如下：
第一个参数可以是滚动容器元素的DOM选择器字符串，也可以是滚动容器元素的引用对象。下面是一个有效的语法：
var wrapper = document.getElementById('wrapper');var myScroll = new IScroll(wrapper); 所以基本上你要么直接传递元素，要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:
var myScroll = new IScroll('.wrapper'); 注意，iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll，你需要构建自己的循环机制。
2、初始化
当DOM准备完成后iScroll需要被初始化。最保险的方式是在window的onload事件中启动它。在DOMContentLoaded事件中或者inline initialization中做也可以，需要记住的是脚本需要知道滚动区域的高度和宽度。如果你有一些图片在滚动区域导致不能立马获取区域的高度和宽度，iScroll的滚动尺寸有可能会错误。
为滚动起容器增加position:relative或者absolute样式。这将解决大多数滚动器容器大小计算不正确的问题。
综上所述，最小的iScroll配置如下：
... ...
- ...
- ...
...
如果你有一个复杂的DOM结构，最好在onload事件之后适当的延迟，再去初始化iScroll。最好给浏览器100或者200毫秒的间隙再去初始化iScroll。
三、配置iScroll
在iScroll初始化阶段可以通过构造函数的第二个参数配置它。
var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true}); 上面的例子示例了在iScroll初始化时开启鼠标滚轮支持和滚动条支持。
在初始化后你可以通过options对象访问标准化值。例如：
console.dir(myScroll.options);
上面的语句将返回myScroll实例的配置信息。所谓的标准化意味着如果你设置useTransform:true，但是浏览器并不支持CSS transforms，那么useTransform属性值将为false。
四、基本功能
options.bounce
当滚动器到达容器边界时他将执行一个小反弹动画。在老的或者性能低的设备上禁用反弹对实现平滑的滚动有帮助。
默认值：true
options.click
为了重写原生滚动条，iScroll禁止了一些默认的浏览器行为，比如鼠标的点击。如果你想你的应用程序响应click事件，那么该设置次属性为true。请注意，建议使用自定义的tap 事件来代替它（见下面）。
默认属性：false
options.disableMouseoptions.disablePointeroptions.disableTouch
默认情况下，iScroll监听所有的指针事件，并且对这些事件中第一个被触发的做出反应。这看上去是浪费资源，但是在大量的浏览器/设备上兼容，特定的事件侦测证明是无效的，所以listen-to-all是一个安全的做法。
如果你有一种设备侦测的内部机制，或者你知道你的脚本将在什么地方运行，你可以把你不需要的事件禁用（鼠标，指针或者触摸事件）。
下面的例子是禁用鼠标和指针事件：
var myScroll = new IScroll('#wrapper', { disableMouse: true, disablePointer: true }); 默认值：false
options.eventPassthrough
有些时候你想保留原生纵向的滚动条但想为横向滚动条增加iScroll功能（比如走马灯）。设置这个属性为true并且iScroll区域只将影响横向滚动，纵向滚动将滚动整个页面。
在移动设备上访问。注意，这个值也可以设置为'horizontal'，其作用和上面介绍的相反（横向滚动条保持原生，纵向滚动条使用iScroll）。
options.freeScroll
此属性针对于两个两个纬度的滚动条（当你需要横向和纵向滚动条）。通常情况下你开始滚动一个方向上的滚动条，另外一个方向上会被锁定不动。有些时候，你需要无约束的移动（横向和纵向可以同时响应），在这样的情况下此属性需要设置为true。请参考 。
默认值：false
options.keyBindings
此属性为true时激活键盘（和远程控制）绑定。请参考下面的内容。
默认值：false
options.invertWheelDirection
当鼠标滚轮支持激活后，在有些情况下需要反转滚动的方向。（比如，鼠标滚轮向下滚动条向上，反之亦然）。
默认值：false
options.momentum
在用户快速触摸屏幕时，你可以开/关势能动画。关闭此功能将大幅度提升性能。
默认值：true
options.mouseWheel
侦听鼠标滚轮事件。
默认值：false
options.preventDefault
当事件触发时是否执行preventDefault()。此属性应该设置为true，除非你真的知道你需要怎么做。
请参考中的preventDefaultException，可以获取更多控制preventDefault行为的信息。
Default: true 默认值：true
options.scrollbars
是否显示为默认的滚动条。更多信息请查看
默认值：false
options.scrollXoptions.scrollY
默认情况下只有纵向滚动条可以使用。如果你需要使用横向滚动条，需要将scrollX 属性值设置为 true。请参考示例。
也可以参考freeScroll选项。
默认值：scrollX: false，scrollY: true
注意属性 scrollX/Y: true 与overflow: auto有相同的效果。设置一个方向上的值为 false 可以节省一些检测的时间和CPU的计算周期。
options.startXoptions.startY
默认情况下iScroll从0, 0 (top left)位置开始，通过此属性可以让滚动条从不同的位置开始滚动。
默认值：0
options.tap
设置此属性为true，当滚动区域被点击或者触摸但并没有滚动时，可以让iScroll抛出一个自定义的tap事件。
这是处理与可以点击元素之间的用户交互的建议方式。侦听tap事件和侦听标准事件的方式一致。示例如下：
element.addEventListener('tap', doSomething, false); \\ Native$('#element').on('tap', doSomething); \\ jQuery 你可以通过传递一个字符串来自定义事件名称。比如：
tap: 'myCustomTapEvent'
在这个示例里你应该侦听名为myCustomTapEvent的事件。
默认值：false
五、滚动条
滚动条不只是像名字所表达的意义一样，在内部它们是作为indicators的引用。
一个指示器侦听滚动条的位置并且现实它在全局中的位置，但是它可以做更多的事情。
先从最基本的开始。
options.scrollbars
正如我们在中提到的，激活滚动条只需要做一件事情，这件事情就是：
var myScroll = new IScroll('#wrapper', { scrollbars: true }); 当然这个默认的行为是可以定制的。
options.fadeScrollbars
不想使用滚动条淡入淡出方式时，需要设置此属性为false以便节省资源。
默认值：false
options.interactiveScrollbars
此属性可以让滚动条能拖动，用户可以与之交互。
默认值：false
options.resizeScrollbars
滚动条尺寸改变基于容器和滚动区域的宽/高之间的比例。此属性设置为false让滚动条固定大小。这可能有助于自定义滚动条样式（如下）。
默认值：true
options.shrinkScrollbars
当在滚动区域外面滚动时滚动条是否可以收缩到较小的尺寸。
有效的值为：'clip' 和 'scale'。
'clip'是移动指示器到它容器的外面，效果就是滚动条收缩起来，简单的移动到屏幕以外的区域。属性设置为此值后将大大的提升整个iScroll的性能。
值'scale'关闭属性useTransition，之后所有的动画效果将使用requestAnimationFrame实现。指示器实际上有各种尺寸，并且最终的效果最好。
默认值：false
注意改变大小不是在GPU上执行的，所以'scale' 是在CPU上执行。
如果你的应用程序将在多种设备上运行，我建议你使用选项'scale'，或者设置'clip' 为 false (例如：在较老的设备上应该设置为'clip' ，而在桌面浏览器上应设置为'scale')。
请参考 示例：
1 2 3 4 5 6iScroll demo: scrollbars 7 8 21 114 115 116iScroll117118173 174 175119172120
171- Pretty row 1
121- Pretty row 2
122- Pretty row 3
123- Pretty row 4
124- Pretty row 5
125- Pretty row 6
126- Pretty row 7
127- Pretty row 8
128- Pretty row 9
129- Pretty row 10
130- Pretty row 11
131- Pretty row 12
132- Pretty row 13
133- Pretty row 14
134- Pretty row 15
135- Pretty row 16
136- Pretty row 17
137- Pretty row 18
138- Pretty row 19
139- Pretty row 20
140- Pretty row 21
141- Pretty row 22
142- Pretty row 23
143- Pretty row 24
144- Pretty row 25
145- Pretty row 26
146- Pretty row 27
147- Pretty row 28
148- Pretty row 29
149- Pretty row 30
150- Pretty row 31
151- Pretty row 32
152- Pretty row 33
153- Pretty row 34
154- Pretty row 35
155- Pretty row 36
156- Pretty row 37
157- Pretty row 38
158- Pretty row 39
159- Pretty row 40
160- Pretty row 41
161- Pretty row 42
162- Pretty row 43
163- Pretty row 44
164- Pretty row 45
165- Pretty row 46
166- Pretty row 47
167- Pretty row 48
168- Pretty row 49
169- Pretty row 50
170
滚动条样式
如果你不喜欢默认的滚动条样式，而且你认为你可以做的更好，你可以自定义滚动条样式。第一步就是设置选项scrollbars的值为'custom'：
var myScroll = new IScroll('#wrapper', { scrollbars: 'custom' }); 使用下面的CSS类可以简单的改变滚动条样式。
- .iScrollHorizontalScrollbar，这个样式应用到横向滚动条的容器。这个元素实际上承载了滚动条指示器。
- .iScrollVerticalScrollbar，和上面的样式类似，只不过适用于纵向滚动条容器。
- .iScrollIndicator，真正的滚动条指示器。
- .iScrollBothScrollbars，这个样式将在双向滚动条显示的情况下被加载到容器元素上。通常情况下其中一个（横向或者纵向）是可见的
自定义滚动条样式示例：
1 2 3 4 5 6iScroll demo: styled scrollbars 7 8 18 161 162 163iScroll164165220 221 222166219167
218- Pretty row 1
168- Pretty row 2
169- Pretty row 3
170- Pretty row 4
171- Pretty row 5
172- Pretty row 6
173- Pretty row 7
174- Pretty row 8
175- Pretty row 9
176- Pretty row 10
177- Pretty row 11
178- Pretty row 12
179- Pretty row 13
180- Pretty row 14
181- Pretty row 15
182- Pretty row 16
183- Pretty row 17
184- Pretty row 18
185- Pretty row 19
186- Pretty row 20
187- Pretty row 21
188- Pretty row 22
189- Pretty row 23
190- Pretty row 24
191- Pretty row 25
192- Pretty row 26
193- Pretty row 27
194- Pretty row 28
195- Pretty row 29
196- Pretty row 30
197- Pretty row 31
198- Pretty row 32
199- Pretty row 33
200- Pretty row 34
201- Pretty row 35
202- Pretty row 36
203- Pretty row 37
204- Pretty row 38
205- Pretty row 39
206- Pretty row 40
207- Pretty row 41
208- Pretty row 42
209- Pretty row 43
210- Pretty row 44
211- Pretty row 45
212- Pretty row 46
213- Pretty row 47
214- Pretty row 48
215- Pretty row 49
216- Pretty row 50
217
如果你设置resizeScrollbars: false，滚动条将是固定大小，否则它将基于滚动区域的尺寸变化。
请接着阅读接下来的内容。
六、无限滚动
iScroll集成智能缓存系统，允许处理的使用(重用)一群元素几乎无限数量的数据。
无限滚动开发的早期阶段，尽管它可以被认为是稳定的，但它还没有准备好被广泛使用。
1 2 3 4 5 6iScroll demo: infinite scrolling 7 8 85 86 199 200 201iScroll202 203204240 241 242 243 244205239206
238- Row 1
207- Row 2
208- Row 3
209- Row 4
210- Row 5
211- Row 6
212- Row 7
213- Row 8
214- Row 9
215- Row 10
216- Row 11
217- Row 12
218- Row 13
219- Row 14
220- Row 15
221 222- Row 16
223- Row 17
224- Row 18
225- Row 19
226- Row 20
227- Row 21
228- Row 22
229- Row 23
230- Row 24
231- Row 25
232- Row 26
233- Row 27
234- Row 28
235- Row 29
236- Row 30
237
iscroll下载链接：
更多内容参考：