【杂谈】小记一个ios11的bug

　　前段时间，除了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的元素能够正常的显示。

　　虽然大体上解决了滚动的问题，不过由于ios的一些特殊机制，笔者发现，实际使用上即使是第二种方案也有一定的缺陷（不使用window的滚动条会导致在容器滚动的时候会转移焦点，然后再一次滚动外层的时候焦点又会再一次转移，导致再想继续滚动内部滚动条的话会产生一些额外操作，使用上最好避免有内外都要触发滚动事件的情况）。

　　简单总结一下，2017年即将过去，虽然大圈子内对于适配新机器刘海的情况给了很多的解决方案，但是当真正落实到具体问题的时候，笔者发现。。硕大的前端圈子竟然毫无声响，反而是native的同学已经碰到了很多类似的问题，并开展了热烈的讨论。。这也是值得人深思的问题。

转载于:https://www.cnblogs.com/mfoonirlee/p/7680646.html