在移动端开发过程中,页面中使用了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的解决方法,经过测试仍然不能解决问题。