ios html5头部无法固定的问题(安卓正常)
需求:头部菜单导航固定,中间正文可以拉动,在安卓手机正常,在ios上下拉的时候头部被带下来,有卡顿用户体验也不会,解决方法如下:
有问题的布局代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < 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>
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步