iscroll.js-简
来源：互联网 发布：淘宝发货时间投诉 编辑：程序博客网 时间：2024/05/18 13:24
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 中文版
0 0
- iscroll.js-简
- iScroll.js
- iscroll.js用法
- iScroll.js （share）
- 使用iscroll.js
- iScroll.js 用法参考
- iscroll.js的使用
- iScroll.js使用
- iscroll.js--滚动加载实例
- iscroll.js遇到的问题
- iscroll
- iScroll
- iScroll
- iscroll
- iScroll.js 用法参考 （share）
- 手机左右上下滑动插件--iscroll.js
- iScroll.js参数说明和使用方法
- IScroll.js 最新版本 v5.1.2
- 深圳美食大推荐，物美价廉等着你
- python服务器环境搭建（1）——本地服务器准备
- 【linux】执行shell脚本的4种方法总结
- Installation error: INSTALL_CANCELED_BY_USER [...]Please check logcat output for more details. [...
- node.js实用模块
- iscroll.js-简
- iOS开发之支付宝集成流程
- Excel-修改Excel中的00:00:00格式
- 用递归方法实现行列式求值
- 二叉搜索树和双链表转换
- head first C# 赛狗日
- 使用迭代器进行遍历
- ORA-26026: 唯一的索引 TESTTEMP.SYS_C0035273 最初处于无法使用的状态
- 100-多线程与信号
