背景：
都说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结构变的很复杂，就会体验很渣.
今天先到这里..
时间： 2024-10-14 03:45:10