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結構為：

<div id="wrapper">
   <ul>
       <li>...</li>
       <li>...</li>
       ...
   </ul>
</div>

iScroll的例項化（與iScroll4版本有所區別，需注意）：

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

i改成了大寫。後面的目標由原來的只能是DOM物件或者id改成可以支援DOM物件和選擇器選擇

官方建議在window.onload之後使用，如果使用$(document).ready也可以，但是需要能夠獲取到滾動區域的高度或寬度。為滾動區域增加position:relative或者absolute，能夠解決大部分尺寸計算上的問題。

iScroll功能配置 —— 通過第二個引數進行滾動功能的相關設定

   var myScroll = new IScroll('#wrapper', {
       mouseWheel: true,
       scrollbars: true
   });

事件的繫結：仿造jquery的on繫結事件的方式

element.addEventListener('tap', doSomething, false); // 原生
$('#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