当前位置:Gxlcms > html代码 > HTML5应用开发:JavaScript库iScroll教程_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:6人阅读

目录

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或者其他的库文件: