iScroll学习笔记

标签：

背景：

都说iScroll是移动端开发必学的库之一，先来看看为啥要用iScroll。网上找了找资料，总结下原因如下：

1、position：fixed 在移动端浏览器上的兼容性不好

简单列举如下：

IOS的Safari ：

• IOS5及以后的版本支持该属性，
• IOS4及以下会把它当成默认的 position: static， 跟着页面一起滚动

Android ：

• Android 2.1及以下不支持
• Android 2.2会在滚动完成之后把定位的元素拉回到原来的位置
• Android 2.3 只有在禁止页面缩放的情况下才支持固定定位
• Android 3 和 4 支持

更多的机型和浏览器版本请戳这里

2、原生的滚动在手机浏览器上不太流畅，体验不好

3、暂时没有了，以后有了再补充

入门

基本的DOM结构如下：

<header>IScoll</header>
<div id="wrapper">
    <ul>
        <li></li>
        ...
    </ul>
</div>
<footer>Footer</footer>

外部容器的 id 必须为 wrapper 这是源码里写死的，只有容器的第一个子元素才能滚动，上面的代码中，滚动的是ul。每个需要滚动的区域都需要进行初始化，初始化代码如下

document.addEventListener(‘DOMContentLoaded‘, loadHandler, false);

function loadHandler(){
    var myScroll = new IScroll(‘#wrapper‘);
}

然后就可以滚动了，超级简单有木有！！

初始化代码最好放在 window onload 事件处理函数中，或者 DOMContentLoaded 事件处理函数中，脚本需要知道滚动区域的宽/高，如果有一些图片没有指定宽高，IScroll可能会错误地计算滚动尺寸。

如果DOM结构比较复杂，onload之后留出100到200毫秒的时间给iScroll初始化是比较明智的，

另外，文档里还有这样一段话：

box-shadow, opacity, text-shadow 和 alpha 通道这些属性不能和硬件加速很好的结合。当只有少量元素时，滚动效果会很流畅，但是一旦你的DOM结构变的很复杂，就会体验很渣.

今天先到这里..

iScroll学习笔记

标签：

原文地址：http://www.cnblogs.com/walle2/p/4830948.html