需求:头部菜单导航固定,中间正文可以拉动,在安卓手机正常,在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>