IOSSafari浏览器下固定定位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;css固定定位
}
然后html我们这样写
<div class="header">
<!--写点啥吧-->
</div>
<div class="main">
<!--写点啥吧-->
</div>
<div class="footer">
<!--写点啥吧-->
</div>
转载⾃：blog.csdn/grsghh/article/details/61416953
其他⽂章地址：
www.360doc/content/17/0420/16/40589753_647142573.shtml

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。