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

当我们在开发移动端页面时使用固定定位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自始至终都没有移动过丝毫。

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