HTML5应用开发：JavaScript库iScroll教程

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, 当元素在一个方向滚动时(如水平)，另一个方向(如垂直)的滚动会被锁定.

HTML5应用开发：JavaScript库iScroll教程的更多相关文章

2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
18个基于 HTML5 Canvas 开发的图表库
如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...
Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著谢光磊译 ISBN 978-7-121-21226-0 201 ...
20个简化开发任务的 JavaScript库
所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 JavaScript代码集.JavaScript主要用于写内嵌于H ...
HTML5游戏开发系列教程8(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...
HTML5游戏开发系列教程4(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-4/ 这篇文章是我们继续使用canvas来进行HTML5游戏开发系 ...
【转】20个简化开发任务的 JavaScript库
原文出处: codegeekz 译文出处: oschina 所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 J ...
5款帮助简化的HTML5 Audio开发的Javascript类库
HTML5的audio标签提供了我们方便控制声音的功能,可是使用原生的HTML5来开发声音或者音乐相关的项目仍旧很的麻烦.在今天这篇文章中,我们将介绍5款帮助你简化开发的javascript audi ...

随机推荐

.net中的多线程
一.多线程的概念什么是进程呢?当一个程序开始运行时,它就是一个进程,进程所指包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的,线程是程序中的一个执行流, ...
D. Ilya and Escalator
D. Ilya and Escalator time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
iOS 手机邮箱正则表达式
//iOS代码//判断邮箱格式是否正确的代码: //利用正则表达式验证 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex ...
杂乱无章之Oracle（二）
六.IMPDP用法 1.导入表 impdp hsiufo/hsiufo directory=dump_dir dumpfile=full.dmp tables=scott.emp remap_sche ...
centos 下 yum安装和卸载软件
安装的命令是,yum install xxx,yum会查询数据库,有无这一软件包,如果有,则检查其依赖冲突关系,如果没有依赖冲突,那么最好,下载安装;如果有,则会给出提示,询问是否要同时安装依赖,或删 ...
Java线程同步的方式
java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改查), 将会导致数据不准确,相互之间产生冲突,因此加入同步锁以避免在该线程没有完成操作之前,被其他线程的 ...
linux_memcached_memcachedb
三个区别当你听到memcache与memcached时把它当做是一个东东就好了,尽管它们存在区别,但是这并不影响你对它们的运用及理解. “Memcache”它是一个自由和开放源代码.高性能.分配的内 ...
XML Schema验证
XML Schema验证一.什么事Schema(XSD) XML Schema是微软定义的一套用来验证XML技术.是一套预先规定的XML元素和属性创建的,这些元素和属性定义了XML文档的结构和内容模 ...
angularjs表格方式显示数据
<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td&g ...
selenium判断元素类型
在做级联的下拉框时发现第一次选择了下拉框(如省份),第二个下拉框可能是输入框,也可能是下拉框,这个时候就需要判断他的元素类型,来做判断图1 图2 原理很简单:获取控件的html文件内容,拿到内容后在 ...

HTML5应用开发：JavaScript库iScroll教程

HTML5应用开发：JavaScript库iScroll教程的更多相关文章

随机推荐

热门专题