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

原创 2017年03月11日 14:37:39

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

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

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

小技巧css解决移动端ios不兼容position:fixed属性,无需插件

ios运用position:fixed会错位,css一行样式巧妙解决定位问题。
  • liu__hua
  • liu__hua
  • 2014-10-15 09:34:33
  • 111012

IOS 7.0中网页position=fixed的问题

这几天遇到了一个比较坑爹的问题,曾经比较好用的position:fixed;属性竟然在IOS 7.0系统中成了BUG,当同事跟我说这个问题的时候我纠结半天,开始以为只是iPhone 5中的7.0有这个...
  • u011740841
  • u011740841
  • 2016-08-22 10:39:59
  • 483

IOS系统对position:fixed支持不好的解决方法

IOS系统对position:fixed支持不好的bug
  • tww316
  • tww316
  • 2014-07-31 14:53:55
  • 2855

ios解决输入框弹出后position:fixed失效问题

最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题。position:fixed在安卓2.2以上已经实现,但是在ios8以下系统当小键盘激...
  • a32524150195
  • a32524150195
  • 2017-03-10 17:28:20
  • 1846

几种解决position:fixed 抖动的方法

最近在给客户做的手机版网站中用到了position:fixed 来模拟手机APP的底部的导航条,但是在三星手机的浏览器上出现了 抖动的情况,类似于下图这种情况:   在下滑的过程中,底部导...
  • zx_001
  • zx_001
  • 2015-12-14 14:19:49
  • 10274

移动端 position:fixed; 定位在iOS系统上失效,该怎么解决

今天公司运营人员在苹果手机上浏览页面时发现一个bug,就是根据浏览器窗口position:fixed; 定位在底部的元素,会随着屏幕的滚动而滚动,在iOS系统上失效,随后让我改。自己在网上搜了一些解决...
  • zyg1515330502
  • zyg1515330502
  • 2018-01-30 16:45:48
  • 495

小技巧css解决移动端ios不兼容position:fixed属性,无需插件

移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现。但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题。如图: 如何解决: 查阅...
  • kaosini
  • kaosini
  • 2014-12-04 13:36:36
  • 1566

移动端整体布局-解决ios下fixed定位抖动的问题

原文地址:http://www.w3cplus.com/mobile/mobile-terminal-refactoring-mobile-layout.html 一般来说,header...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2016-05-26 22:22:27
  • 14880

苹果手机safairi不支持position:fixed

我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部。但在IOS的safari和webview中,对position:fixed的...
  • baidu_31345523
  • baidu_31345523
  • 2016-02-29 17:08:06
  • 2511

移动端web页面input+fixed布局bug总结

最近在做移动端,又涉及到了 fixed(固定位置定位)的问题,在使用fixed的过程中,遇到了一些的问题,并且部分问题无法找到较好的解决方案。下面 是我在网上找到的一些解决方法,仅供参考: 正...
  • ly2983068126
  • ly2983068126
  • 2015-10-21 16:33:30
  • 32576
收藏助手
不良信息举报
您举报文章:踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案
举报原因:
原因补充:

(最多只允许输入30个字)