iscroll.js是Matteo Spinelli开发的一个js文件，使用原生js编写，不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题，兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。
iscroll的理解
1、
最佳的HTML结构如下：
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。
最基本的脚本初始化的方式如下：
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>
第一个参数可以是滚动容器元素的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配置如下：
<head>
...
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
</script>
</head>
...
<body onload="loaded()">
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
如果你有一个复杂的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.disableMouse
options.disablePointer
options.disableTouch
默认情况下，iScroll监听所有的指针事件，并且对这些事件中第一个被触发的做出反应。这看上去是浪费资源，但是在大量的浏览器/设备上兼容，特定的事件侦测证明是无效的，所以listen-to-all是一个安全的做法。
如果你有一种设备侦测的内部机制，或者你知道你的脚本将在什么地方运行，你可以把你不需要的事件禁用（鼠标，指针或者触摸事件）。
下面的例子是禁用鼠标和指针事件：
var myScroll = new IScroll('#wrapper', {
disableMouse: true, disablePointer: true }); 默认值：false
options.eventPassthrough
有些时候你想保留原生纵向的滚动条但想为横向滚动条增加iScroll功能（比如走马灯）。设置这个属性为true并且iScroll区域只将影响横向滚动，纵向滚动将滚动整个页面。
在移动设备上访问event passthrough demo。注意，这个值也可以设置为'horizontal'，其作用和上面介绍的相反（横向滚动条保持原生，纵向滚动条使用iScroll）。
options.freeScroll
此属性针对于两个两个纬度的滚动条（当你需要横向和纵向滚动条）。通常情况下你开始滚动一个方向上的滚动条，另外一个方向上会被锁定不动。有些时候，你需要无约束的移动（横向和纵向可以同时响应），在这样的情况下此属性需要设置为true。请参考 2D scroll demo。
默认值：false
options.keyBindings
此属性为true时激活键盘（和远程控制）绑定。请参考下面的Key bindings内容。
默认值：false
options.invertWheelDirection
当鼠标滚轮支持激活后，在有些情况下需要反转滚动的方向。（比如，鼠标滚轮向下滚动条向上，反之亦然）。
默认值：false
options.momentum
在用户快速触摸屏幕时，你可以开/关势能动画。关闭此功能将大幅度提升性能。
默认值：true
options.mouseWheel
侦听鼠标滚轮事件。
默认值：false
options.preventDefault
当事件触发时是否执行preventDefault()。此属性应该设置为true，除非你真的知道你需要怎么做。
请参考Advanced features中的preventDefaultException，可以获取更多控制preventDefault行为的信息。
Default: true 默认值：true
options.scrollbars
是否显示为默认的滚动条。更多信息请查看Scrollbar
默认值：false
options.scrollX
options.scrollY
默认情况下只有纵向滚动条可以使用。如果你需要使用横向滚动条，需要将scrollX 属性值设置为 true。请参考示例horizontal demo。
也可以参考freeScroll选项。
默认值：scrollX: false，scrollY: true
注意属性 scrollX/Y: true 与overflow: auto有相同的效果。设置一个方向上的值为 false 可以节省一些检测的时间和CPU的计算周期。
options.startX
options.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 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
6 <title>iScroll demo: scrollbars</title>
7 <script type="text/javascript" src="js/iscroll.js"></script>
8 <script type="text/javascript">
9 var myScroll;
10 function loaded () {
11 myScroll = new IScroll('#wrapper', {
12 scrollbars: true,
13 mouseWheel: true,
14 interactiveScrollbars: true,
15 shrinkScrollbars: 'scale',
16 fadeScrollbars: true
17 });
18 }
19 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
20 </script>
21 <style type="text/css">
22 * {
23 -webkit-box-sizing: border-box;
24 -moz-box-sizing: border-box;
25 box-sizing: border-box;
26 }
27 html {
28 -ms-touch-action: none;
29 }
30 body,ul,li {
31 padding: 0;
32 margin: 0;
33 border: 0;
34 }
35 body {
36 font-size: 12px;
37 font-family: ubuntu, helvetica, arial;
38 overflow: hidden;
39 }
40 #header {
41 position: absolute;
42 z-index: 2;
43 top: 0;
44 left: 0;
45 width: 100%;
46 height: 45px;
47 line-height: 45px;
48 background: #CD235C;
49 padding: 0;
50 color: #eee;
51 font-size: 20px;
52 text-align: center;
53 font-weight: bold;
54 }
55 #footer {
56 position: absolute;
57 z-index: 2;
58 bottom: 0;
59 left: 0;
60 width: 100%;
61 height: 48px;
62 background: #444;
63 padding: 0;
64 border-top: 1px solid #444;
65 }
66 #wrapper {
67 position: absolute;
68 z-index: 1;
69 top: 45px;
70 bottom: 48px;
71 left: 0;
72 width: 100%;
73 background: #ccc;
74 overflow: hidden;
75 }
76 #scroller {
77 position: absolute;
78 z-index: 1;
79 -webkit-tap-highlight-color: rgba(0,0,0,0);
80 width: 100%;
81 -webkit-transform: translateZ(0);
82 -moz-transform: translateZ(0);
83 -ms-transform: translateZ(0);
84 -o-transform: translateZ(0);
85 transform: translateZ(0);
86 -webkit-touch-callout: none;
87 -webkit-user-select: none;
88 -moz-user-select: none;
89 -ms-user-select: none;
90 user-select: none;
91 -webkit-text-size-adjust: none;
92 -moz-text-size-adjust: none;
93 -ms-text-size-adjust: none;
94 -o-text-size-adjust: none;
95 text-size-adjust: none;
96 }
97 #scroller ul {
98 list-style: none;
99 padding: 0;
100 margin: 0;
101 width: 100%;
102 text-align: left;
103 }
104 #scroller li {
105 padding: 0 10px;
106 height: 40px;
107 line-height: 40px;
108 border-bottom: 1px solid #ccc;
109 border-top: 1px solid #fff;
110 background-color: #fafafa;
111 font-size: 14px;
112 }
113 </style>
114 </head>
115 <body onload="loaded()">
116 <div id="header">iScroll</div>
117 <div id="wrapper">
118 <div id="scroller">
119 <ul>
120 <li>Pretty row 1</li>
121 <li>Pretty row 2</li>
122 <li>Pretty row 3</li>
123 <li>Pretty row 4</li>
124 <li>Pretty row 5</li>
125 <li>Pretty row 6</li>
126 <li>Pretty row 7</li>
127 <li>Pretty row 8</li>
128 <li>Pretty row 9</li>
129 <li>Pretty row 10</li>
130 <li>Pretty row 11</li>
131 <li>Pretty row 12</li>
132 <li>Pretty row 13</li>
133 <li>Pretty row 14</li>
134 <li>Pretty row 15</li>
135 <li>Pretty row 16</li>
136 <li>Pretty row 17</li>
137 <li>Pretty row 18</li>
138 <li>Pretty row 19</li>
139 <li>Pretty row 20</li>
140 <li>Pretty row 21</li>
141 <li>Pretty row 22</li>
142 <li>Pretty row 23</li>
143 <li>Pretty row 24</li>
144 <li>Pretty row 25</li>
145 <li>Pretty row 26</li>
146 <li>Pretty row 27</li>
147 <li>Pretty row 28</li>
148 <li>Pretty row 29</li>
149 <li>Pretty row 30</li>
150 <li>Pretty row 31</li>
151 <li>Pretty row 32</li>
152 <li>Pretty row 33</li>
153 <li>Pretty row 34</li>
154 <li>Pretty row 35</li>
155 <li>Pretty row 36</li>
156 <li>Pretty row 37</li>
157 <li>Pretty row 38</li>
158 <li>Pretty row 39</li>
159 <li>Pretty row 40</li>
160 <li>Pretty row 41</li>
161 <li>Pretty row 42</li>
162 <li>Pretty row 43</li>
163 <li>Pretty row 44</li>
164 <li>Pretty row 45</li>
165 <li>Pretty row 46</li>
166 <li>Pretty row 47</li>
167 <li>Pretty row 48</li>
168 <li>Pretty row 49</li>
169 <li>Pretty row 50</li>
170 </ul>
171 </div>
172 </div>
173 <div id="footer"></div>
174 </body>
175 </html>
滚动条样式
如果你不喜欢默认的滚动条样式，而且你认为你可以做的更好，你可以自定义滚动条样式。第一步就是设置选项scrollbars的值为'custom'：
var myScroll = new IScroll('#wrapper', {
scrollbars: 'custom' }); 使用下面的CSS类可以简单的改变滚动条样式。
- .iScrollHorizontalScrollbar，这个样式应用到横向滚动条的容器。这个元素实际上承载了滚动条指示器。
- .iScrollVerticalScrollbar，和上面的样式类似，只不过适用于纵向滚动条容器。
- .iScrollIndicator，真正的滚动条指示器。
- .iScrollBothScrollbars，这个样式将在双向滚动条显示的情况下被加载到容器元素上。通常情况下其中一个（横向或者纵向）是可见的
自定义滚动条样式示例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
6 <title>iScroll demo: styled scrollbars</title>
7 <script type="text/javascript" src="js/iscroll.js"></script>
8 <script type="text/javascript">
9 var myScroll;
10 function loaded () {
11 myScroll = new IScroll('#wrapper', {
12 scrollX: true,
13 scrollbars: 'custom'
14 });
15 }
16 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
17 </script>
18 <style type="text/css">
19 /* Styled scrollbars */
20 .iScrollHorizontalScrollbar {
21 position: absolute;
22 z-index: 9999;
23 height: 16px;
24 left: 2px;
25 right: 2px;
26 bottom: 2px;
27 overflow: hidden;
28 }
29 .iScrollHorizontalScrollbar.iScrollBothScrollbars {
30 right: 18px;
31 }
32 .iScrollVerticalScrollbar {
33 position: absolute;
34 z-index: 9999;
35 width: 16px;
36 bottom: 2px;
37 top: 2px;
38 right: 2px;
39 overflow: hidden;
40 }
41 .iScrollVerticalScrollbar.iScrollBothScrollbars {
42 bottom: 18px;
43 }
44 .iScrollIndicator {
45 position: absolute;
46 background: #cc3f6e;
47 border-width: 1px;
48 border-style: solid;
49 border-color: #EB97B4 #7C2845 #7C2845 #EB97B4;
50 border-radius: 8px;
51 }
52 .iScrollHorizontalScrollbar .iScrollIndicator {
53 height: 100%;
54 background: -moz-linear-gradient(left, #cc3f6e 0%, #93004e 100%);
55 background: -webkit-linear-gradient(left, #cc3f6e 0%,#93004e 100%);
56 background: -o-linear-gradient(left, #cc3f6e 0%,#93004e 100%);
57 background: -ms-linear-gradient(left, #cc3f6e 0%,#93004e 100%);
58 background: linear-gradient(to right, #cc3f6e 0%,#93004e 100%);
59 }
60 .iScrollVerticalScrollbar .iScrollIndicator {
61 width: 100%;
62 background: -moz-linear-gradient(top, #cc3f6e 0%, #93004e 100%);
63 background: -webkit-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
64 background: -o-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
65 background: -ms-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
66 background: linear-gradient(to bottom, #cc3f6e 0%,#93004e 100%);
67 }
68 /* end */
69 * {
70 -webkit-box-sizing: border-box;
71 -moz-box-sizing: border-box;
72 box-sizing: border-box;
73 }
74 html {
75 -ms-touch-action: none;
76 }
77 body,ul,li {
78 padding: 0;
79 margin: 0;
80 border: 0;
81 }
82 body {
83 font-size: 12px;
84 font-family: ubuntu, helvetica, arial;
85 overflow: hidden;
86 }
87 #header {
88 position: absolute;
89 z-index: 2;
90 top: 0;
91 left: 0;
92 width: 100%;
93 height: 45px;
94 line-height: 45px;
95 background: #CD235C;
96 padding: 0;
97 color: #eee;
98 font-size: 20px;
99 text-align: center;
100 font-weight: bold;
101 }
102 #footer {
103 position: absolute;
104 z-index: 2;
105 bottom: 0;
106 left: 0;
107 width: 100%;
108 height: 48px;
109 background: #444;
110 padding: 0;
111 border-top: 1px solid #444;
112 }
113 #wrapper {
114 position: absolute;
115 z-index: 1;
116 top: 45px;
117 bottom: 48px;
118 left: 0;
119 width: 100%;
120 background: #ccc;
121 overflow: hidden;
122 }
123 #scroller {
124 position: absolute;
125 z-index: 1;
126 -webkit-tap-highlight-color: rgba(0,0,0,0);
127 width: 2000px;
128 -webkit-transform: translateZ(0);
129 -moz-transform: translateZ(0);
130 -ms-transform: translateZ(0);
131 -o-transform: translateZ(0);
132 transform: translateZ(0);
133 -webkit-touch-callout: none;
134 -webkit-user-select: none;
135 -moz-user-select: none;
136 -ms-user-select: none;
137 user-select: none;
138 -webkit-text-size-adjust: none;
139 -moz-text-size-adjust: none;
140 -ms-text-size-adjust: none;
141 -o-text-size-adjust: none;
142 text-size-adjust: none;
143 }
144 #scroller ul {
145 list-style: none;
146 padding: 0;
147 margin: 0;
148 width: 100%;
149 text-align: left;
150 }
151 #scroller li {
152 padding: 0 10px;
153 height: 40px;
154 line-height: 40px;
155 border-bottom: 1px solid #ccc;
156 border-top: 1px solid #fff;
157 background-color: #fafafa;
158 font-size: 14px;
159 }
160 </style>
161 </head>
162 <body onload="loaded()">
163 <div id="header">iScroll</div>
164 <div id="wrapper">
165 <div id="scroller">
166 <ul>
167 <li>Pretty row 1</li>
168 <li>Pretty row 2</li>
169 <li>Pretty row 3</li>
170 <li>Pretty row 4</li>
171 <li>Pretty row 5</li>
172 <li>Pretty row 6</li>
173 <li>Pretty row 7</li>
174 <li>Pretty row 8</li>
175 <li>Pretty row 9</li>
176 <li>Pretty row 10</li>
177 <li>Pretty row 11</li>
178 <li>Pretty row 12</li>
179 <li>Pretty row 13</li>
180 <li>Pretty row 14</li>
181 <li>Pretty row 15</li>
182 <li>Pretty row 16</li>
183 <li>Pretty row 17</li>
184 <li>Pretty row 18</li>
185 <li>Pretty row 19</li>
186 <li>Pretty row 20</li>
187 <li>Pretty row 21</li>
188 <li>Pretty row 22</li>
189 <li>Pretty row 23</li>
190 <li>Pretty row 24</li>
191 <li>Pretty row 25</li>
192 <li>Pretty row 26</li>
193 <li>Pretty row 27</li>
194 <li>Pretty row 28</li>
195 <li>Pretty row 29</li>
196 <li>Pretty row 30</li>
197 <li>Pretty row 31</li>
198 <li>Pretty row 32</li>
199 <li>Pretty row 33</li>
200 <li>Pretty row 34</li>
201 <li>Pretty row 35</li>
202 <li>Pretty row 36</li>
203 <li>Pretty row 37</li>
204 <li>Pretty row 38</li>
205 <li>Pretty row 39</li>
206 <li>Pretty row 40</li>
207 <li>Pretty row 41</li>
208 <li>Pretty row 42</li>
209 <li>Pretty row 43</li>
210 <li>Pretty row 44</li>
211 <li>Pretty row 45</li>
212 <li>Pretty row 46</li>
213 <li>Pretty row 47</li>
214 <li>Pretty row 48</li>
215 <li>Pretty row 49</li>
216 <li>Pretty row 50</li>
217 </ul>
218 </div>
219 </div>
220 <div id="footer"></div>
221 </body>
222 </html>
如果你设置resizeScrollbars: false，滚动条将是固定大小，否则它将基于滚动区域的尺寸变化。
请接着阅读接下来的内容。
六、无限滚动
iScroll集成智能缓存系统，允许处理的使用(重用)一群元素几乎无限数量的数据。
无限滚动开发的早期阶段，尽管它可以被认为是稳定的，但它还没有准备好被广泛使用。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 6 <title>iScroll demo: infinite scrolling</title> 7 <script type="text/javascript" src="../../build/iscroll-infinite.js"></script> 8 <script type="text/javascript"> 9 /****************************************************************************** 10 * 11 * For the sake of keeping the script dependecy free I'm including a custom 12 * AJAX function. You should probably use a third party plugin 13 * 14 */ 15 function ajax (url, parms) { 16 parms = parms || {}; 17 var req = new XMLHttpRequest(), 18 post = parms.post || null, 19 callback = parms.callback || null, 20 timeout = parms.timeout || null; 21 22 req.onreadystatechange = function () { 23 if ( req.readyState != 4 ) return; 24 25 // Error 26 if ( req.status != 200 && req.status != 304 ) { 27 if ( callback ) callback(false); 28 return; 29 } 30 31 if ( callback ) callback(req.responseText); 32 }; 33 34 if ( post ) { 35 req.open('POST', url, true); 36 req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 37 } else { 38 req.open('GET', url, true); 39 } 40 41 req.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 42 43 req.send(post); 44 45 if ( timeout ) { 46 setTimeout(function () { 47 req.onreadystatechange = function () {}; 48 req.abort(); 49 if ( callback ) callback(false); 50 }, timeout); 51 } 52 } 53 /* 54 *****************************************************************************/ 55 56 var myScroll; 57 58 function loaded () { 59 myScroll = new IScroll('#wrapper', { 60 mouseWheel: true, 61 infiniteElements: '#scroller .row', 62 //infiniteLimit: 2000, 63 dataset: requestData, 64 dataFiller: updateContent, 65 cacheSize: 1000 66 }); 67 } 68 69 function requestData (start, count) { 70 ajax('dataset.php?start=' + +start + '&count=' + +count, { 71 callback: function (data) { 72 data = JSON.parse(data); 73 myScroll.updateCache(start, data); 74 } 75 }); 76 } 77 78 function updateContent (el, data) { 79 el.innerHTML = data; 80 } 81 82 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 83 84 </script> 85 86 <style type="text/css"> 87 * { 88 -webkit-box-sizing: border-box; 89 -moz-box-sizing: border-box; 90 box-sizing: border-box; 91 } 92 93 html { 94 -ms-touch-action: none; 95 } 96 97 body,ul,li { 98 padding: 0; 99 margin: 0; 100 border: 0; 101 } 102 103 body { 104 font-size: 12px; 105 font-family: ubuntu, helvetica, arial; 106 overflow: hidden; /* this is important to prevent the whole page to bounce */ 107 } 108 109 #header { 110 position: absolute; 111 z-index: 2; 112 top: 0; 113 left: 0; 114 width: 100%; 115 height: 45px; 116 line-height: 45px; 117 background: #CD235C; 118 padding: 0; 119 color: #eee; 120 font-size: 20px; 121 text-align: center; 122 font-weight: bold; 123 } 124 125 #footer { 126 position: absolute; 127 z-index: 2; 128 bottom: 0; 129 left: 0; 130 width: 100%; 131 height: 48px; 132 background: #444; 133 padding: 0; 134 border-top: 1px solid #444; 135 } 136 137 #wrapper { 138 position: absolute; 139 z-index: 1; 140 top: 45px; 141 bottom: 48px; 142 left: 0; 143 width: 100%; 144 background: #ccc; 145 overflow: hidden; 146 } 147 148 #scroller { 149 position: absolute; 150 z-index: 1; 151 -webkit-tap-highlight-color: rgba(0,0,0,0); 152 width: 100%; 153 -webkit-transform: translateZ(0); 154 -moz-transform: translateZ(0); 155 -ms-transform: translateZ(0); 156 -o-transform: translateZ(0); 157 transform: translateZ(0); 158 -webkit-touch-callout: none; 159 -webkit-user-select: none; 160 -moz-user-select: none; 161 -ms-user-select: none; 162 user-select: none; 163 -webkit-text-size-adjust: none; 164 -moz-text-size-adjust: none; 165 -ms-text-size-adjust: none; 166 -o-text-size-adjust: none; 167 text-size-adjust: none; 168 } 169 170 #scroller ul { 171 list-style: none; 172 padding: 0; 173 margin: 0; 174 width: 100%; 175 text-align: left; 176 position: relative; 177 } 178 179 #scroller li { 180 position: absolute; 181 width: 100%; 182 top: 0; 183 left: 0; 184 -webkit-transform: translateZ(0); 185 -moz-transform: translateZ(0); 186 -ms-transform: translateZ(0); 187 -o-transform: translateZ(0); 188 transform: translateZ(0); 189 padding: 0 10px; 190 height: 40px; 191 line-height: 40px; 192 border-bottom: 1px solid #ccc; 193 border-top: 1px solid #fff; 194 background-color: #fafafa; 195 font-size: 16px; 196 } 197 198 </style> 199 </head> 200 <body onload="loaded()"> 201 <div id="header">iScroll</div> 202 203 <div id="wrapper"> 204 <div id="scroller"> 205 <ul> 206 <li class="row">Row 1</li> 207 <li class="row">Row 2</li> 208 <li class="row">Row 3</li> 209 <li class="row">Row 4</li> 210 <li class="row">Row 5</li> 211 <li class="row">Row 6</li> 212 <li class="row">Row 7</li> 213 <li class="row">Row 8</li> 214 <li class="row">Row 9</li> 215 <li class="row">Row 10</li> 216 <li class="row">Row 11</li> 217 <li class="row">Row 12</li> 218 <li class="row">Row 13</li> 219 <li class="row">Row 14</li> 220 <li class="row">Row 15</li> 221 222 <li class="row">Row 16</li> 223 <li class="row">Row 17</li> 224 <li class="row">Row 18</li> 225 <li class="row">Row 19</li> 226 <li class="row">Row 20</li> 227 <li class="row">Row 21</li> 228 <li class="row">Row 22</li> 229 <li class="row">Row 23</li> 230 <li class="row">Row 24</li> 231 <li class="row">Row 25</li> 232 <li class="row">Row 26</li> 233 <li class="row">Row 27</li> 234 <li class="row">Row 28</li> 235 <li class="row">Row 29</li> 236 <li class="row">Row 30</li> 237 </ul> 238 </div> 239 </div> 240 241 <div id="footer"></div> 242 243 </body> 244 </html>
iscroll下载链接：GitHub-iscroll
更多内容参考：iScroll 5 API 中文版
6070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
