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 var myScroll; function loaded() { myScroll = new iScroll('wrapper', { checkDOMChanges: true }); } document.addEventListener('DOMContentLoaded', loaded, false);
myScroll是一个全局变量，你可以在任何地方使用scroller函数。当DOMContentLoaded触发之后即加载load函数，但是有的时候由于DOM加载需要一段时间，同时加载iScroll的内容可能会导致页面异常，可以为load函数添加一个settimeout，代码如下：
1 var myScroll; function loaded() { setTimeout(function () { myScroll = new iScroll('wrapper'); }, 100); } window.addEventListener('load', loaded, false);
第三步，添加HTML元素，本例中，元素包括header，footer，和wrapper(List滚动区域)，代码如下：
[xhtml]
iScroll
查看更多关于HTML5应用开发：JavaScript库iScroll教程_html/css_WEB-ITnose的详细内容...