移动端fixed定位抖动问题

最新推荐文章于 2023-06-05 10:46:07 发布

前行的枫_denglinbo

最新推荐文章于 2023-06-05 10:46:07 发布

阅读量1.8k

点赞数 1

文章标签：前端移动端

本文链接：https://blog.csdn.net/weixin_44708870/article/details/100550924

版权

在移动端开发中，fixed定位元素在滚动时易出现抖动问题。本文详细介绍了该问题的常见表现，并提供了针对Android和iOS系统的解决方案，包括使用-webkit-overflow-scrolling和-webkit-transform属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在移动端开发过程中，页面中使用了fixed定位的元素在页面滚动过程中会出现抖动问题。部分机型自带浏览器不会出现问题，但绝大多数机型都会出现这个问题。

<div class="wrapper">
        <div class="myheader">
            这是头部logo及名称
        </div>
        <div class="content">
            <ul>
                <li>这里有很多内容</li>
                <li>这里有很多内容</li>
                <li>这里有很多内容</li>
                <li>这里有很多内容</li>
                <li>这里有很多内容</li>
                <li>这里有很多内容</li>
                <li>这里有很多内容</li>
                <li>这里有很多内容</li>
                <li>这里有很多内容</li>
                <li>这里有很多内容</li>
                
            </ul>
        </div>
        <div class="myfooter">
            <ul>
                <li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
            </ul>
        </div>
    </div>
样式部分：
<style>
    html,body{
        width:100%;
        height: 100%;
    }
    *{
      padding:0;
      margin:0;
      list-style: none;
    }
    .myheader{
        padding:15px;
        text-align:center;
        font-size:22px;
        background-color:yellowgreen;
        position: fixed;
        width:100%;
        top:0;
        left:0;
    }
    .content{
        margin-top:60px;
        letter-spacing: 1px;
        line-height: 30px;
        padding:15px;
    }
    .myfooter ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color:yellowgreen;
    }
    .myfooter{
        position: fixed;
        width:100%;
        bottom:0;
        left:0;
    }
    .myfooter ul li{
        padding:15px;
        text-align:center;    
    }
</style>

效果图
当我们页面滚动时，按照正常来说，使用了fixed定位的头部和底部导航应该纹丝不动。然而此时，这两部分出现的上下抖动的问题，给我们的感觉很不好。

解决方法：

    .wrapper{
      -webkit-overflow-scrolling: touch;
    }
    .myheader,.myfooter{
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

andriod系统这样就能够解决抖动问题，但是ios系统抖动仍然是有的，只不过抖动幅度没有之前那么大，但仍然很明显。尝试了网上给出的各种针对iOS的解决方法，经过测试仍然不能解决问题。