ios html5头部无法固定的问题（安卓正常）

最新推荐文章于 2025-11-03 11:25:03 发布

原创最新推荐文章于 2025-11-03 11:25:03 发布 · 367 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种解决iOS设备上网页下拉时头部菜单被带下及卡顿问题的方法。通过调整布局代码和应用硬件加速，实现了头部菜单固定且不随页面滚动，提升用户体验。

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