IOS环境下固定定位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定位的头部和尾部也跟着起飞了，这我们就很不开心了，所以通常我们可以这样写该页面的布局：

//我是吸顶头部

.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>

</div>

</div>

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

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