根据实际代码，对比以下三种情况进行调整

目录

一、滚动元素不要包含fixed元素。

二、滚动元素设置absolute定位。

三、fixed定位元素增加transform样式。

一、滚动元素不要包含fixed元素。

<!-- 滚动元素不要包含fixed元素 代码示例如下-->
<body>
    <div class="header">fixed固定元素</div>
    <div class="main">滚动内容</div>
</body>

<!-- 滚动元素和fixed元素在同一容器下时就会出问题 代码示例如下-->
<body>
    <div>
        <div class="header">fixed固定元素</div>
        <div class="main">滚动内容</div>
    </div>
</body>

二、滚动元素设置absolute定位。

.header {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0px;
}

.main {
    width: 100%;
    height: auto;
    position: absolute;
    box-sizing: border-box;
    overflow-y: scroll;
}

三、fixed定位元素增加transform样式。

.header {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

注：在添加transform样式后发现fixed定位元素上边有1px缝隙，暂时没有找到原因，通过设置top：-1px；临时解决。

 参考文章：https://www.jb51.net/article/153342.htm

https://www.cnblogs.com/ranyonsue/p/14069643.html

# css # html5
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云Stack8.3面向香港正式发布，六大亮点激发云上跃迁

avatar 华为云开发者联盟
cover

GaussDB SQL查询语句执行过程解析

avatar 华为云开发者联盟
cover

6个实例带你解读TinyVue 组件库跨框架技术

avatar 华为云开发者联盟