希望建制一個有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)
