以iScroll建構Mobile Web頁面

希望建制一個有header content footer的網頁,header與footer固定在上下
content可以scroll的頁面,scroll部份使用iScroll來處理
相關注意要項如下
一.網頁

 <div class="wrapper">  
      <div class='header'></div>  
      <div id='myContent' class="content">  
           <div class='scroller'><div class='itemContainer'></div></div>  
      </div>  
      <div class="footer"></div>  
 </div>  

要scroll的內容下需有一個唯一的子節點(div或ul都可）,iScroll會對這個div做scroll
在這裡就是對content下的scroller這div
也就是說你在這下面塞的東西都會被scroll

二.CSS
設定一個有footer有header的頁面
1.架構
wrapper,content,footer,header,這四個主要架構要以
position:absolute來定位,而在z-index層次上
wrapper在最下層
content在中間層
footer,header在最上層
在這主要架構下的內部分層,就不需要用absolute來定位
2.尺寸大小
header與footer在高度上定好絕對的高度,寬度以100%設定來與wrapper保持同樣寬度
content因為可能會因為螢幕大小變化或旋轉螢幕而需要調整
這部份就需要靠JS動態改變高度
3.wrapper 整個頁面包裝

.wrapper{
  position:absolute;z-index:1;//以絕對位置設定當作最下層layer
  top:0;left:0;//設定貼在browser的最左上方
  margin:0;padding:0;
  width:300px;//可以用%設定
  height:300px;     
}

4.header 

.header{
  position:absolute;z-index:3;//設定在最上層
  top:0;left:0;//設定貼在wrapper的靠左上方
  margin:0;padding:0;
  width:100%;//設定與wrapper相同寬度
  height:50px;//設定header的絕對高度     
}

5.footer

.footer{
  position:absolute;z-index:3;//設定在最上層
  bottom:0px;left:0;//設定貼在wrapper的靠左下方
  margin:0;padding:0;
  width:100%;//設定與wrapper相同寬度
  height:50px;//設定header的絕對高度     
}

6.content
.content被設定到iscroll,重點是
.content要設定overflow:auto,高度則透過js來設定到達(wrapper-header-footer)高度
.content以下的container絕對不要設定高度,否則內容就無法scroll了

.content{
  position:absolute;z-index:2;//設定在中間層
  top:50px;//設定在header的下方,也就是設定header的高度
  left:0;
  margin:0;padding:0;
  width:100%;
  height:200px;//設定wrapper扣掉header與footer後的高度,這部份由js動態改變值
  overflow:auto;//設定內部的所有內容在超過的時候以scroll顯示
  >.scroller{
    width:100%;//注意千萬不要設定height,內容超過時才可以scroll
    >.itemContainer{
      width:100%;//注意千萬不要設定height,內容超過時才可以scroll
    }       
  }
}

三.JS
1.instance
要當作scroll的DOM container確定已經產生好才去產生iScroll
設定container要以id設定,不要用class

window.scroll=new iScroll('myContent',{
  hScrollBar:false,
  vScrollBar:true,
  hideScrollBar:false
})

2.refresh
在更新container內容,後需執行refresh動作,
且包在setTimeout內執行

setTimeout(function(){
  window.scroll.refresh();
},0)