移动端框架 滚动类 iScroll5

HTML5学堂：移动端开发中，经常遇到需要模拟APP的效果header或是footer固定住，里面的内容区域实现滚动。但是对低端手机单纯使用CSS是兼容不了，需要JavaScript的支持。本文讲解了使用iScroll5的使用方法，解决了固定高度的容器内滚动内容。

iscroll诞生的意义

之所以iscroll会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header或是footer再加上一个可以内容的滚动的中间区域组成。

　　position:fixed在ios和android的使用，而ios4（4以及以前）系统以及以前的安卓系统（2.3及以前）并不支持position:fixed。这个问题可以使用iScroll框架进行解决。

　　之前一直都在使用iScroll4.0版本，后来查到iScroll5已经比较稳定了（即度过了“测试版”），于是转到了5这个版本上，不过~iScroll5和iScroll4的差别有些大，包括语法都发生了很大的变化~

基本的结构要求

使用iScroll这个脚本库时，DOM树的结构要足够简单，移除不必要的标签，尽量避免过多的标签嵌套使用。

如果希望ul中的内容发生滚动，需要在外层添加一层，同时将iScroll的功能添加到最外层上。官方给出的demo结构为：

1. <div id="wrapper">
2.     <ul>
3.         <li>...</li>
4.         <li>...</li>
5.         ...
6.     </ul>
7. </div>

欢迎沟通交流~HTML5学堂

iScroll的实例化（与iScroll4版本有所区别，需注意）：

var myScroll = new IScroll('#wrapper');

i改成了大写。后面的目标由原来的只能是DOM对象或者id改成可以支持DOM对象和选择器选择

官方建议在window.onload之后使用，如果使用$(document).ready也可以，但是需要能够获取到滚动区域的高度或宽度。为滚动区域增加position:relative或者absolute，能够解决大部分尺寸计算上的问题。

iScroll功能配置 —— 通过第二个参数进行滚动功能的相关设置

1.     var myScroll = new IScroll('#wrapper', {
2.         mouseWheel: true,
3.         scrollbars: true
4.     });

事件的绑定：仿造jquery的on绑定事件的方式

1. element.addEventListener('tap', doSomething, false); // 原生
2. $('#element').on('tap', doSomething); // jQuery

一些常用方法：

zoom(scale, x, y, time) 放大和缩小

refresh方法 —— 在DOM树发生变化时，应该调用此方法

scrollTo(x, y, time, easing) 滚动到某个位置

scrollToElement(el, time, offsetX, offsetY, easing) 滚动到某个元素

offsetx和offsety定义像素偏移，这样你可以滚动到元素加上一个指定的偏移量

easing 的具体方法被放置在了 IScroll.utils.ease当中，包含：quadratic, circular, back, bounce, elastic

欢迎沟通交流~HTML5学堂