ios html5頭部無法固定的問題(安卓正常)
阿新 • • 發佈:2019-05-11
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頭部無法固定的問題(安卓正常)