1. 程式人生 > >ios html5頭部無法固定的問題(安卓正常)

ios html5頭部無法固定的問題(安卓正常)

orm style pre 加速 overflow ans code color fix

需求:頭部菜單導航固定,中間正文可以拉動,在安卓手機正常,在ios上下拉的時候頭部被帶下來,有卡頓用戶體驗也不會,解決方法如下:

有問題的布局代碼

<div class="page">
<div  class="header">
頭部固定
</div>
<div>
正文
</div>
</div>

<style>
.header{
position:fixed;
top:0;
}

.page{
position:absolute;
overflow-y:scroll;
}
</style>

   正確的布局方式是

<div  class="header">
頭部固定
</div>
<div class="page">
正文
</div>

<style>
.header{
position:fixed;
top:0;
}

.page{
position:absolute;
overflow-y:scroll;
-webkit-transform: translateZ(0); --硬件加速
}
</style>

問題解決!
轉載 http://www.itxst.com/detail/mb3qzfzm.html

ios html5頭部無法固定的問題(安卓正常)