前段时间,除了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. 关于for 循环里 线程执行顺序问题

    最近在做项目时遇到了 这样的需求 要在一个for循环里执行下载的操作, 而且要等 下载完每个 再去接着走循环.上网查了一些 觉得说的不是很明确.现在把我用到的代码 贴上 希望可以帮到有此需求的开发者  ...

  2. 国画经典之梅花PSD素材

    国画经典之梅花图片PSD素材,由huiyi8素材网提供. 地址:http://www.huiyi8.com/meihua/​

  3. Mac系统存储-其他存储无故增大

    解决办法:打开Finder:安全倾倒废纸篓就会减少很大一部分存储.

  4. laravel基础课程---15、分页及验证码(lavarel分页效果如何实现)

    laravel基础课程---15.分页及验证码(lavarel分页效果如何实现) 一.总结 一句话总结: 数据库的paginate方法:$data=\DB::table("user" ...

  5. JQuery UI - resizable调整区域大小

    JQuery UI - resizable   ·概述 resizable插件可以让选中的元素具有改变尺寸的功能. 官方示例地址:http://jqueryui.com/demos/resizable ...

  6. 集训Day11

    别人的题公开原题面不好 写题解吧 T1 很明显答案满足二分,二分之后算出每个人的位置,做一个LIS即可 T2 阅读体验极差 T3 根本不会 交都没交 期望得分200

  7. ACM学习历程—POJ1088 滑雪(dp && 记忆化搜索)

    Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...

  8. ACM学习历程——HDU1331 Function Run Fun(锻炼多维dp的打表)

    Description We all love recursion! Don't we?        Consider a three-parameter recursive function w( ...

  9. AtCoder Regular Contest 072 E:Alice in linear land

    题目传送门:https://arc072.contest.atcoder.jp/tasks/arc072_c 题目翻译 给你一个数组\(D\),然后给你一个操作序列\(d\),每次操作可以将\(D\) ...

  10. 《TCP/IP详解卷一:协议》数据链路层(一)

    版权声明:本文为博主原创文章,转载请标注转载链接,谢谢.   目录(?)[+]   引言         在TCP/IP协议族中,链路层主要有三个目的: 为IP模块发送和接收IP数据报. 为ARP模块 ...