【杂谈】小记一个ios11的bug

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

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

　　在ios11上打开滚动以上的页面（若是看不到效果能够访问这个连接），会发现页面上的fixed的button若是滚动得过快则会消失，当滚动中止以后又会再次出现，一个很是奇怪的问题，通过笔者和团队的小伙伴的多方调试参考，发现主流的解决方案有两种：

　　一、直接避免用浏览器的滚动事件，彻底使用touch事件模拟滚动，也就是这篇文章所介绍的；

　　二、另外一种就比较有趣了，可以在改动比较小的状况下修复这个IOS11的这个bug，请看这个连接

　　其实原理很简单，笔者通过一些调试发现，只要滚动的元素用的不是window的滚动条，且fixed的元素不在滚动元素内部，就可以比较方便的规避IOS11的这个缺陷：

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

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

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

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