iscroll的理解

2019年11月10日 阅读数:38
这篇文章主要向大家介绍iscroll的理解,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

一、javascript

最佳的HTML结构以下:php

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

iScroll做用于滚动区域的外层。在上面的例子中,UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动,其余子元素彻底被忽略。css

最基本的脚本初始化的方式以下:html

<script type="text/javascript">
  var myScroll = new IScroll('#wrapper');
</script>

第一个参数能够是滚动容器元素的DOM选择器字符串,也能够是滚动容器元素的引用对象。下面是一个有效的语法:java

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);

因此基本上你要么直接传递元素,要么传递一个querySelector字符串。所以可使用css名称代替ID去选择一个滚动器容器,以下:git

var myScroll = new IScroll('.wrapper');

注意,iScroll使用的是querySelector 而不是 querySelectorAll,因此iScroll只会做用到选择器选中元素的第一个。若是你须要对多个对象使用iScroll,你须要构建本身的循环机制github

二、初始化

当DOM准备完成后iScroll须要被初始化。最保险的方式是在window的onload事件中启动它。在DOMContentLoaded事件中或者inline initialization中作也能够,须要记住的是脚本须要知道滚动区域的高度和宽度。若是你有一些图片在滚动区域致使不能立马获取区域的高度和宽度,iScroll的滚动尺寸有可能会错误。web

为滚动起容器增长position:relative或者absolute样式。这将解决大多数滚动器容器大小计算不正确的问题。ajax

综上所述,最小的iScroll配置以下:ubuntu

   <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。

3、配置iScroll

在iScroll初始化阶段能够经过构造函数的第二个参数配置它。

var myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: true
});

上面的例子示例了在iScroll初始化时开启鼠标滚轮支持和滚动条支持。

在初始化后你能够经过options对象访问标准化值。例如:

console.dir(myScroll.options);

上面的语句将返回myScroll实例的配置信息。所谓的标准化意味着若是你设置useTransform:true,可是浏览器并不支持CSS transforms,那么useTransform属性值将为false。

4、基本功能

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: falsescrollY: 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

 

5、滚动条

滚动条不仅是像名字所表达的意义同样,在内部它们是做为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,滚动条将是固定大小,不然它将基于滚动区域的尺寸变化。

请接着阅读接下来的内容。

 

6、无限滚动

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 中文版