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);但是经测试并没有用

 

转载于:https://www.cnblogs.com/xuniannian/p/8722393.html