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

随机推荐

windows 7 与linux 双系统安装
注意事项: 1.安装Linux的时候,一定要选 “空闲”的硬盘去创建标准分区,否则会格式化C盘或D盘windows的资料.[如 /dev/sda1 为c盘主分区,sda2为扩展分区---下面有D盘,E ...
LeetCode16 3Sum Closest
题意: Given an array S of n integers, find three integers in S such that the sum is closest to a given ...
使用docker-hub
使用docker hub 需要其账号基本操作查找镜像 sudo docker search centos 每个用户有自己的命名空间,如:centos是存仓库中的镜像文件,admln/centos则 ...
沈逸老师PHP魔鬼特训笔记(10)
为了防止代码让我们混淆不清,大家看视频中的分离方法 1.新建了一个文件夹叫code (这代表是代码) 2.再新建一个文件夹叫page (这代表是页面) 代码该怎么写呢? 这里要记住口诀 1.index ...
CNZZ每天百亿条日志写入，SLS+ODPS轻松拆招
如果你是一个站长,想要提交一个查询,从一亿多条日志中找出从湖南省发出.使用ISP电信.通过百度搜索跳转到达的访问日志.该怎么做? 别急,在接收到您的查询条件后,CNZZ可以快速通过SLS(简单日志服务 ...
【Android 界面效果26】listview android:cacheColorHint,android:listSelector属性作用
ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景图片,或者背景颜色时,滚动时listView会黑掉, 原因是,滚动时,列表里面的view重绘时,用的依 ...
HTML超出文本显示省略号...[text-overflow]
需要对div或者span同时应用Css: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 即可实现所想要得到的溢出文本显示省略 ...
Bash中的位置参数和特殊参数
#Bash中的位置参数和特殊参数 #Bash中的位置参数是由0以外的一个或多个数字表示的参数.#位置参数是当Shell或Shell函数被引用时由Shell或Shell函数的参数赋值,并且可以使用Bas ...
为DEDE织梦添加XMl网站地图
在后台管理: 核心-频道模型-单页文档管理-增加一个新页面模版文件放在你现在使用的templets目录下,sitemap.xml的内容如下 <?xml version="1.0&qu ...
Matlab的GUI参数传递方式总结
MATLAB GUI传递方式 1.全局变量: 2.作为函数的参数传递: 3.利用控件的userdata数据: 4.为handles结构体添加新字段: 5.setappdata函数为句柄添加数据: 6. ...

HTML5应用开发：JavaScript库iScroll教程

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

随机推荐

热门专题