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>

View Code

滚动条样式

如果你不喜欢默认的滚动条样式，而且你认为你可以做的更好，你可以自定义滚动条样式。第一步就是设置选项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>

View Code

如果你设置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>

View Code

iscroll下载链接：GitHub-iscroll

更多内容参考：iScroll 5 API 中文版

相关阅读:
河南省第十届ACM省赛G：Plumbing the depth of lake
南洋理工oj 题目92 图像有用区域
 初学欧拉图，知识总结，后续增加
 初学并查集知识总结后续增加
 南阳oj 题目42 一笔画问题
 南阳oj 题目 90 整数划分
 南阳oj题目20吝啬的国度菜鸟的进阶之路
 南阳oj 题目21 三个水杯
 UVA-540 Team Queue
HDU-1596 find the safest road
原文地址：https://www.cnblogs.com/xiangru0921/p/6547218.html

iscroll的理解

2、初始化

三、配置iScroll

四、基本功能

options.bounce

options.click

options.disableMouseoptions.disablePointeroptions.disableTouch

options.eventPassthrough

options.freeScroll

options.keyBindings

options.invertWheelDirection

options.momentum

options.mouseWheel

options.preventDefault

options.scrollbars

options.scrollXoptions.scrollY

options.startXoptions.startY

options.tap

五、滚动条

options.scrollbars

options.fadeScrollbars

options.interactiveScrollbars

options.resizeScrollbars

options.shrinkScrollbars

滚动条样式

六、无限滚动

options.disableMouse
options.disablePointer
options.disableTouch

options.scrollX
options.scrollY

options.startX
options.startY