前段时间,除了apple发布了新的硬件之外,同步还发布了新的操作系统,IOS11,当大家都将注意力聚焦在那个奇怪的刘海该如何适配的时候,笔者的项目在适配IOS11却出现了其他的问题。

  众所周知,IOS在滚动的时候是不能执行js的,这虽然是它内部的实现导致的,也为了解决这一问题,它特地推出的position:sticky属性,来兼容一些对动态设置fixed的场景,不过,当笔者的测试机升级到了IOS11的时候,一切又不一样了:    

  在ios11上打开滚动以上的页面(如果看不到效果可以访问这个链接),会发现页面上的fixed的button如果滚动得过快则会消失,当滚动停止之后又会再次出现,一个非常奇怪的问题,经过笔者和团队的小伙伴的多方调试参考,发现主流的解决方案有两种:

  1、直接避免用浏览器的滚动事件,完全使用touch事件模拟滚动,也就是这篇文章所介绍的;

  2、另一种就比较有趣了,能够在改动比较小的情况下修复这个IOS11的这个bug,请看这个链接

  其实原理很简单,笔者经过一些调试发现,只要滚动的元素用的不是window的滚动条,且fixed的元素不在滚动元素内部,及定位元素和滚动元素要在同一个层级,就能够比较方便的规避IOS11的这个缺陷:

给要滚动的元素加上

 overflow: auto;
-webkit-overflow-scrolling: touch;
height: 100vh;

  核心代码就以上的3行,目的就是构造一个和body一样的容纳滚动条的容器,当然,由于这样设置之后,ios下的滚动体验比较差,还需要加上一个第二行的那句hack,相关文章可参考这里,这样,就在最小改动的基础上,保证了fixed的元素能够正常的显示。

网上有说加上 transform: translate3d(0, 0, 0);但是经测试并没有用

IOS在滚动的时候fixed消失的更多相关文章

  1. 【原】IOS兼容性之APP内fixed定位头部跳动

    兼容现象: 在App的webview里边,我们有时候会在页面里写自定义头部,会使用到fixed定位,我们想要的效果是,页面无论怎么滑动,这个自定义的头部始终是固定在顶部的,但是在ios 11以上的版本 ...

  2. 【bug】—— ios scroll 滚动穿透

    BUG描述 在 ios 微信浏览器或原生浏览器中,主内容容器.content在文档流内,并且overflow-y: scroll.在其之上有一个 fixed 定位的弹出层.popUp,滚动.popUp ...

  3. ios webview下footer部分fixed失效问题

    场景: 如下图所示,一个很正常的页面需求,footer固定在底部,中间为滚动内容区 然后footer的css一般是这样的 footer{ position:fixed; bottom:; left:; ...

  4. ios自动滚动图片功能源码

    源码AdScrollerView,一个已经封装好的UIScrollView的子类,可以自动滚动图片以及对应的描述语,类似淘宝app首页的广告滚动效果.滚动图片数量不限,并且显示pageControl. ...

  5. 解决微信小程序ios端滚动卡顿的问题

    方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...

  6. iOS UITableView滚动头图 拉伸放大效果 (头部弹性效果) 增加iOS11支持 附有demo

    今天修改日期为2017年11月25日 两个月前做了iOS11的bug修复,才对博客进行更新,见谅. 在iOS11上需要注意两个问题 1.使用UIScrollview,UITableView,UIWeb ...

  7. IOS系统不兼容position: fixed;属性的解决方案

    position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...

  8. iOS 线性滚动

    在这里,给大家带来简单的滚动实现,首先看一下实现效果. 通过观察不难发现,有很多地方并不是那么容易想出来的,对于篇随笔,感兴趣可以查查相关资料,我就不尽行过多说明,(主要是开考文字,不好说明

  9. iOS菜单滚动联动内容区域功能实现

    平时开发APP中关于此功能还是比较经常碰到,本实例借用三个开源的插件,并对其中一个进行修改调整实现出想要的效果:本文重点介绍修改的内容跟三个插件的运用,这三个插件还可以各自扩展到其它项目的运用: 效果 ...

随机推荐

  1. c#使用itextsharp输出pdf(动态填充表单内容,显示中文)

    相关链接: iText的简单应用-字体 c#程序为PDF文件填写表单内容 示例代码: static void Main(string[] args) { BaseFont font = BaseFon ...

  2. ubuntn下 apt的用法和yum的比较(转)

    centos有yum安装软件,Ubuntu有apt工具. apt简单的来说,就是给Ubuntu安装软件的一种命令方式. 一.apt的相关文件 /etc/apt/sources.list 设置软件包的获 ...

  3. linux应用之jdk环境的安装(centos)

    一.yum安装 1.执行:yum search jdk 已加载插件:fastestmirror, securityLoading mirror speeds from cached hostfile ...

  4. find命令的基础用法以及按文件修改时间查找文件

    一般文件查找方法: find 命令学好是一件很有趣的事情,也可以帮你在查找系统文件的时候事倍功半,还可以与正则表达式结合使用,功能强大,是一个很好的查找工具.可以整体提高你的系统管理能力. 基础用法 ...

  5. aop 例子(annotation方式实现)

    面向切面编程(也叫面向方面),可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术.AOP实际是GoF设计模式的延续,设计模式孜孜不倦追求的是调用者和被调用者之 ...

  6. 递归/非递归----python深度遍历二叉树(前序遍历,中序遍历,后序遍历)

    递归代码:递归实现很简单 '二叉树结点类' class TreeNode: def __init__(self, x): self.val = x self.left = None self.righ ...

  7. zk 10之:Curator之三:服务的注册及发现

    Service Discovery 我们通常在调用服务的时候,需要知道服务的地址,端口,或者其他一些信息,通常情况下,我们是把他们写到程序里面,但是随着服务越来越多,维护起来也越来越费劲,更重要的是, ...

  8. 使用unlist将日期型数据的列表转换为向量时,出现的异常

    在使用unlist函数,将日期型的列表,转换为向量时,不会得到期望的结果,如下: > dateLst <- list(Sys.Date()) > dateLst [[1]] [1] ...

  9. Ubuntu候选栏乱码

    解决方案 cd ~/.config rm -rf SogouPY* sogou* 注销重新登录就可以

  10. Spring入门第九课

    使用外部属性文件 在配置文件里面配置Bean时,有时需要在Bean的配置里面混入系统部署的细节信息(例如:文件路径,数据源配置信息等)而这些部署细节实际上需要和Bean配置相分离. Spring提供了 ...