踩坑路上——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自始至终都没有移动过丝毫。

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

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

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

ios对于fixed属性不兼容的解决方案

ios对于fixed属性不兼容的解决方案
  • Zhooson
  • Zhooson
  • 2017年07月22日 17:49
  • 4349

web端ios布局fixed元素软键盘唤起时fixed失效

在ios上做了一个简单的页面头部置顶底部置顶源码如下: Title *{ margin: 0; ...
  • qq_26744901
  • qq_26744901
  • 2016年05月02日 23:27
  • 6057

iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题。 今天说一下比较老的IOS的问题,那就是“iOS下的 ...
  • bbsyi
  • bbsyi
  • 2016年09月04日 01:09
  • 2662

苹果手机safairi不支持position:fixed

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

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

最近在做移动端,又涉及到了 fixed(固定位置定位)的问题,在使用fixed的过程中,遇到了一些的问题,并且部分问题无法找到较好的解决方案。下面 是我在网上找到的一些解决方法,仅供参考: 正...
  • ly2983068126
  • ly2983068126
  • 2015年10月21日 16:33
  • 29884

iOS11 导航栏按钮位置问题的解决

iOS11 导航栏按钮位置问题的解决此文是iOS11在beta的时候写的,当时主要是为了解决问题,并没有想太多的优化,后期发现其代码量比较大,且会出现一些问题,比如多个按钮的设置,比如约束的丢失等,现...
  • spicyShrimp
  • spicyShrimp
  • 2017年09月08日 11:34
  • 24685

iOS11开发新增功能大全

iOS11开发新增功能大全 转载请标注出处 前言 2017年6月6日凌晨一点(北京时间),苹果在2017WWDC大会上发布了全新的iOS11系统。可能大家印象比较深刻的就是iOS11新增了增强现实的框...
  • u013263917
  • u013263917
  • 2017年06月07日 01:34
  • 13371

iOS11新特性,如何适配iOS11

前言这几天抽空把WWDC的Session看了一些,总结了一些iOS11新的特性,可能对我们的App有影响,需要我们进行适配。本文作为一个总结。本文内容包括:集成了搜索的大标题栏、横向选项卡栏、Marg...
  • conglin1991
  • conglin1991
  • 2017年11月17日 14:30
  • 205

移动端踩坑之旅-ios下fixed、软键盘相关问题总结

最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关...
  • gg464556
  • gg464556
  • 2017年09月12日 20:18
  • 520
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案
举报原因:
原因补充:

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