IOS在滚动的时候fixed消失
前段时间,除了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消失的更多相关文章
- 【原】IOS兼容性之APP内fixed定位头部跳动
兼容现象: 在App的webview里边,我们有时候会在页面里写自定义头部,会使用到fixed定位,我们想要的效果是,页面无论怎么滑动,这个自定义的头部始终是固定在顶部的,但是在ios 11以上的版本 ...
- 【bug】—— ios scroll 滚动穿透
BUG描述 在 ios 微信浏览器或原生浏览器中,主内容容器.content在文档流内,并且overflow-y: scroll.在其之上有一个 fixed 定位的弹出层.popUp,滚动.popUp ...
- ios webview下footer部分fixed失效问题
场景: 如下图所示,一个很正常的页面需求,footer固定在底部,中间为滚动内容区 然后footer的css一般是这样的 footer{ position:fixed; bottom:; left:; ...
- ios自动滚动图片功能源码
源码AdScrollerView,一个已经封装好的UIScrollView的子类,可以自动滚动图片以及对应的描述语,类似淘宝app首页的广告滚动效果.滚动图片数量不限,并且显示pageControl. ...
- 解决微信小程序ios端滚动卡顿的问题
方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...
- iOS UITableView滚动头图 拉伸放大效果 (头部弹性效果) 增加iOS11支持 附有demo
今天修改日期为2017年11月25日 两个月前做了iOS11的bug修复,才对博客进行更新,见谅. 在iOS11上需要注意两个问题 1.使用UIScrollview,UITableView,UIWeb ...
- IOS系统不兼容position: fixed;属性的解决方案
position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...
- iOS 线性滚动
在这里,给大家带来简单的滚动实现,首先看一下实现效果. 通过观察不难发现,有很多地方并不是那么容易想出来的,对于篇随笔,感兴趣可以查查相关资料,我就不尽行过多说明,(主要是开考文字,不好说明
- iOS菜单滚动联动内容区域功能实现
平时开发APP中关于此功能还是比较经常碰到,本实例借用三个开源的插件,并对其中一个进行修改调整实现出想要的效果:本文重点介绍修改的内容跟三个插件的运用,这三个插件还可以各自扩展到其它项目的运用: 效果 ...
随机推荐
- 关于for 循环里 线程执行顺序问题
最近在做项目时遇到了 这样的需求 要在一个for循环里执行下载的操作, 而且要等 下载完每个 再去接着走循环.上网查了一些 觉得说的不是很明确.现在把我用到的代码 贴上 希望可以帮到有此需求的开发者 ...
- 国画经典之梅花PSD素材
国画经典之梅花图片PSD素材,由huiyi8素材网提供. 地址:http://www.huiyi8.com/meihua/
- Mac系统存储-其他存储无故增大
解决办法:打开Finder:安全倾倒废纸篓就会减少很大一部分存储.
- laravel基础课程---15、分页及验证码(lavarel分页效果如何实现)
laravel基础课程---15.分页及验证码(lavarel分页效果如何实现) 一.总结 一句话总结: 数据库的paginate方法:$data=\DB::table("user" ...
- JQuery UI - resizable调整区域大小
JQuery UI - resizable ·概述 resizable插件可以让选中的元素具有改变尺寸的功能. 官方示例地址:http://jqueryui.com/demos/resizable ...
- 集训Day11
别人的题公开原题面不好 写题解吧 T1 很明显答案满足二分,二分之后算出每个人的位置,做一个LIS即可 T2 阅读体验极差 T3 根本不会 交都没交 期望得分200
- ACM学习历程—POJ1088 滑雪(dp && 记忆化搜索)
Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...
- ACM学习历程——HDU1331 Function Run Fun(锻炼多维dp的打表)
Description We all love recursion! Don't we? Consider a three-parameter recursive function w( ...
- AtCoder Regular Contest 072 E:Alice in linear land
题目传送门:https://arc072.contest.atcoder.jp/tasks/arc072_c 题目翻译 给你一个数组\(D\),然后给你一个操作序列\(d\),每次操作可以将\(D\) ...
- 《TCP/IP详解卷一:协议》数据链路层(一)
版权声明:本文为博主原创文章,转载请标注转载链接,谢谢. 目录(?)[+] 引言 在TCP/IP协议族中,链路层主要有三个目的: 为IP模块发送和接收IP数据报. 为ARP模块 ...