移动端框架 滚动类 iScroll5框架

HTML5学堂：之所以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实现滚动的基本思路

总的来说，就是给你需要滚动的元素增加一层。然后使用JS实例化一个iScroll对象，此时针对的元素就是增加的那个“父级”元素，在实例化时再进行相关参数的配置。最后，正常使用一些事件实现需要的功能即可。接下来分步进行讲解。

iScroll对结构的基本要求

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

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

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

iScroll的实例化

之前使用iScroll4的各位需要注意啦，iScroll5与iScroll4在此处的用法是有区别的。

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

iScroll4：var myScroll = new iScroll(ele);

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

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

iScroll功能配置

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

demo：

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

事件绑定，实现相关功能 —— 仿造jQuery的on绑定事件的方式

demo：

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

iScroll5的常用方法

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

iScroll5的参考文档：https://github.com/cubiq/iscroll（只有英文版的~）

欢迎沟通交流~HTML5学堂