ios移动端fixed定位元素在滑动页面时上下抖动的解决方案

最新推荐文章于 2023-03-20 09:20:48 发布

Mr_lee123

最新推荐文章于 2023-03-20 09:20:48 发布

阅读量4.7k

点赞数 1

分类专栏： css web view 文章标签： css html5

本文链接：https://blog.csdn.net/lihaofeifei/article/details/119574918

版权

css 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

web view

2 篇文章 0 订阅

订阅专栏

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

一、滚动元素不要包含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

Mr_lee123

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
ios移动端fixed定位元素在滑动页面时上下抖动的解决方案

根据实际代码，对比以下三种情况进行调整一、滚动元素不要包含fixed元素。<body> <div class="header">fixed固定元素</div> <div class="main">滚动内容</div></body><bo
复制链接

扫一扫