踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/grsghh/article/details/61416953

当我们在开发移动端页面时使用固定定位position:fixed时会发现,在IOS的safari浏览器或原生APP下运行会出现几个问题:
1.页面滑动失去惯性,即当我们滑动页面后松开手指,页面会立即停止。
2.使用fixed定位的元素会随着页面的滑动而抖动的像是犯病了一样。
针对此问题,百度许久,问题得到解决,所以记录一下解决方案,与看到这篇博客的各位分享。

  • -webkit-overflow-scroll:touch解决滑动无惯性
    • 哪个元素/页面使用了fixed定位,就给哪个元素添加该属性。
      注意:添加完后一定要在真机上测试,不要在浏览器如谷歌浏览器提供的移动端调试模式下测试……
      但有时候使用fixed定位的元素是某个事件触发后而动态在当前页面上生成的一个页面,如果此时给该弹出层加上这个样式后,可能会引发其他冲突BUG等,所以在我实际开发过程中,我会使用事件来动态添加更改该样式,如:
//驱动弹窗显示的事件
$('.btnShow').on('click',function(){
    //弹窗显示
    $('.iosWeb').show();
    //给该弹窗添加ios safari专用润滑剂
    $('.iosWeb').css('-webkit-overflow-scroll','touch');
})
//隐藏弹窗的事件
$('.btnHide').on('click',function(){
    //弹窗隐藏
    $('.iosWeb').hide();
    //去掉ios safari专用润滑剂
    $('.iosWeb').css('-webkit-overflow-scroll','auto');
})
  • 使用fixed以外的定位方式重新布局
    • 使用第一个方法我们顺利的解决了页面滑动不流畅的问题,但如果一个使用了该样式的页面有某个使用了fixed定位的吸顶/吸底的头部/尾部,我们会发现页面虽然滑动无阻但fixed定位的头部和尾部也跟着起飞了,这我们就很不开心了,所以通常我们可以这样写该页面的布局:
//我是吸顶头部
.header{
    width:100%;
    height:50px;
    position:fixed;
    top:0px;
}
//我是中间要滑动的部分
.main{
    width:100%;
    height:auto;
    position:absolute;
    padding-top:50px;/*top值为header的高*/
    padding-bottom:50px;/*bottom值为footer的高*/
    box-sizing:border-box;/*这里改变盒子模型为怪异盒模型,这样padding值不会增加main的高度*/
    overflow-y:scroll;
}
//我是吸底尾部
.footer{
    width:100%;
    height:50px;
    position:fixed;
    bottom:0px;
}

然后html我们这样写

<div class="header">
    <!--写点啥吧-->
</div>

<div class="main">
    <!--写点啥吧-->
</div>

<div class="footer">
    <!--写点啥吧-->
</div>

这样布局后,我们滑动的页面其实是中间main元素,而header和footer自始至终都没有移动过丝毫。

希望这篇文章可以帮助到你:)

没有更多推荐了,返回首页