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

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

• -webkit-overflow-scroll:touch解决滑动无惯性
  • 哪个元素/页面使用了fixed定位，就给哪个元素添加该属性。
    注意：添加完后一定要在真机上测试，不要在浏览器如谷歌浏览器提供的移动端调试模式下测试……
    再注意:2019/5/27更新,如果body/html使用该样式,会导致页面中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我们这样写

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

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