HTML5应用开发：JavaScript库iScroll教程_html/css_WEB-ITnose

目录

1. iScroll介绍

2. 安装和使用

3. 简单的iScroll例子

4. Pinch & Zoom

立即学习“Java免费学习笔记（深入）”；

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

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

1

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

[xhtml]

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

[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已经完成，可以在： 这里 观看效果。 完整代码如下：

[xhtml]

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]

5. Snap to element

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

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

完整demo代码：

[xhtml]

6. iScroll详细参数：

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

vScroll, 用来锁定垂直滚动

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

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

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

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

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