HTML5应用开发：JavaScript库iScroll教程-学到老web开发

HTML5应用开发：JavaScript库iScroll教程

发表于:2015-08-10 14:39:42 | 阅读数:--次| 作者:html,css

摘要：目录1. iScroll介绍2. 安装和使用3. 简单的iScroll例子4. Pinch & Zoom5. Snap to element6. iScroll 详细参数1. iScroll介绍一般我们在开发传统Web网站时，偶尔会用固定某一区域的宽度/高，然后借用设置这一区域的overflow:s...

1. iScroll介绍

2. 安装和使用

3. 简单的iScroll例子

4. Pinch & Zoom

5. Snap to element

6. iScroll 详细参数

1. iScroll介绍

一般我们在开发传统Web网站时，偶尔会用固定某一区域的宽度/高，然后借用设置这一区域的overflow:scroll，使得其里面超过该区域范围的内容，可以通过移动滚动条来查看。

而在iOS(iOS5以下)的mobile Safari以及Android的浏览器当中，原生不支持页面内任意区域的overflow:scroll这个属性。传统的做法是使用绝对定位的Header以及Footer，然后让整个页面内容可以滚动。iScroll的出现，也是用Javascript来模拟CSS的overflow:scroll属性，解决页面内元素的滚动问题。

由于iScroll本身使用了transform3d的属性来模拟滚动效果，使得它性能上也非常不错，因为这个属性能使用平台提供的硬件加速。在实际使用当中，效果平滑流畅，可以与原生的相媲美。

本文示例代码可以从GitHub下载，地址：https://github.com/cubiq/iscroll。

2. 安装和使用

iScroll的安装非常简单，你只需要从Github下载最新版本，iScroll是一个纯JS库，因此你可以像使用其他JS脚本一样用script标签来包含iScroll.js, 其并不依赖于jQuery或者其他的库文件：

3. 简单的iScroll例子

本例中，将一步一步地一个通过iScroll模板来实现一个Native App样式的List View。

第一步，在HTML网页中，添加iScroll.js

第二步，在页面加载完成之后，实例化iScroll，loaded函数，典型代码如下：

 
      1 
      <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { checkDOMChanges: true }); } document.addEventListener('DOMContentLoaded', loaded, false); </script>

myScroll是一个全局变量，你可以在任何地方使用scroller函数。当DOMContentLoaded触发之后即加载load函数，但是有的时候由于DOM加载需要一段时间，同时加载iScroll的内容可能会导致页面异常，可以为load函数添加一个settimeout，代码如下：

 
      1 
      <script type="application/javascript" src="iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { setTimeout(function () { myScroll = new iScroll('wrapper'); }, 100); } window.addEventListener('load', loaded, false); </script>

第三步，添加HTML元素，本例中，元素包括header，footer，和wrapper(List滚动区域)，代码如下：

[xhtml]<div id="header">iScroll</div> <div id="wrapper"> <div id="scroller"> <ul id="thelist"> <li>Pretty row 1</li> <li>Pretty row 2</li> <li>Pretty row 3</li> <li>Pretty row 4</li> <li>Pretty row 5</li> <li>Pretty row 6</li> <li>Pretty row 7</li> </ul> </div> </div> <div id="footer"></div>[/xhtml]

#wrapper是显示的窗口，# scroller是包含所有list的集合，一般来说scroller比wrapper要大，scroller在wapper中滚动，只有在wapper中的元素才被显示出来。默认情况下，iScroller只会滚动在#wrapper下的第一个元素，如果你有多个元素都需要滚动，请按照下列方式填写：

[xhtml]<div id="wrapper"> <div id="scroller"> <ul> <li></li> ... ... </ul> <ul> <li></li> ... ... </ul> </div> </div>[/xhtml]

第四步，添加样式表CSS：

我们需要header和footer固定，所以他们的样式如下：

[xhtml]#header { position:absolute; z-index:2; top:0; left:0; width:100%; height:45px; line-height:45px; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); padding:0; color:#eee; font-size:20px; text-align:center; } #footer { position:absolute; z-index:2; bottom:0; left:0; width:100%; height:48px; background-color:#222; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); background-image:-moz-linear-gradient(top, #999, #666 2%, #222); background-image:-o-linear-gradient(top, #999, #666 2%, #222); padding:0; border-top:1px solid #444; } [/xhtml]

Wrapper区域在header和footer之间，其各元素样式表如下：

[xhtml]#wrapper { position:absolute; z-index:1; top:45px; bottom:48px; left:0; width:100%; background:#aaa; overflow:auto; } #scroller { position:absolute; z-index:1; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); width:100%; padding:0; } #scroller ul { list-style:none; padding:0; margin:0; width:100%; text-align:left; } #scroller li { padding:0 10px; height:40px; line-height:40px; border-bottom:1px solid #ccc; border-top:1px solid #fff; font-size:14px; } [/xhtml]

至此，一个完整的listView形式Web App已经完成，可以在：这里观看效果。完整代码如下：

4. Pinch & Zoom

如果单纯的滚动不能满足应用的需求，list元素不仅需要可以滚动，而且可以进行放大和缩小，iSroll同样提供了Pinch & Zoom的方式。你所需要做的工作只是在 Scroller声明的时候添加zoom参数。

var myScroll = new iScroll('wrapper', { zoom: true });

参数zoomMax是指最大允许放大的倍数，默认值是4，用户可以自行定义。

如果想要获得更加流畅的图片放大缩小滚动的效果，推荐使用CSS样式的硬件加速性能，为所有会被缩放的图像添加以下选项：-webkit-transform:translate3d(0,0,0)即可。请注意，使用到硬件加速性能会消耗更多的计算资源，可能导致程序崩溃。

完整demo代码：

[xhtml]<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>iScroll demo: zoom</title> <script type="application/javascript" src="../../src/iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { zoom:true }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); </script> <style type="text/css" media="all"> body,ul,li,p { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } ...... head and footer css #wrapper { position:absolute; z-index:1; top:45px; bottom:48px; left:0; width:100%; background:#aaa; overflow:auto; } #scroller { position:relative; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); width:640px; padding:0; background:#fff; } p { display:block; width:624px; margin-bottom:1em; padding:8px; font-size:14px; } p img { margin:4px 8px; -webkit-transform:translate3d(0,0,0); } </style> </head> <body> <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> <div id="wrapper"> <div id="scroller"> <p><img src="iscroll.jpg" width="100" height="122" alt="iscroll" style="float:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p><img src="iscroll.jpg" width="100" height="122" alt="iscroll" style="float:right">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> </div> </div> <div id="footer"></div> </body> </html>[/xhtml]

5. Snap to element

使用snap选项可以在固定的位置之间来回滚动list，类似跑马灯的效果。实现snap效果同样是在iScroll声明的时候添加相应参数，代码如下：

 
      1 
      var myScroll = new iScroll('wrapper', { snap: true, momentum: false, hScrollbar: false, vScrollbar: false });

完整demo代码：

[xhtml]<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>iScroll demo: Snap to element</title> <script type="text/javascript" src="../../src/iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { snap: 'li', momentum: false, hScrollbar: false, vScrollbar: false }); } document.addEventListener('DOMContentLoaded', loaded, false); </script> <style type="text/css" media="all"> body,ul,li { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } #header { position:absolute; top:0; left:0; width:100%; height:45px; line-height:45px; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); padding:0; color:#eee; font-size:20px; text-align:center; } #header a { color:#f3f3f3; text-decoration:none; font-weight:bold; text-shadow:0 -1px 0 rgba(0,0,0,0.5); } #wrapper { position:absolute; z-index:1; top:45px; bottom:0; left:0; width:100%; overflow:auto; background:#eee; } #scroller { width:800px; float:left; padding:0; } #scroller ul { list-style:none; display:block; float:left; width:100%; height:100%; padding:0; margin:0; border:1px solid #aaa; } #scroller li { display:block; float:left; width:78px; height:78px; line-height:78px; text-align:center; border:1px solid #aaa; background:#ccc; } </style> </head> <body> <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> <div id="wrapper"> <div id="scroller"> <ul id="thelist"> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> </ul> </div> </div> </body> </html>[/xhtml]

6. iScroll详细参数：

hScroll, 用来锁定水平滚动，默认情况下，水平和垂直滚动都是支持的。如果被设定为false，则不能水平方向滚动.

vScroll, 用来锁定垂直滚动

hScrollbar, 水平的滚动条是否显示选项。.

vScrollbar, 垂直的滚动条是否显示选项.

bounce, enable/disable 当滚动超出范围时，是否有弹跳动画。.

momentum, enable/disable inertia. Default: true. 如果想要节省计算资源，可以设置为false.

lockDirection, 当元素在一个方向滚动时(如水平)，另一个方向(如垂直)的滚动会被锁定.