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