前段時間，除了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的同學已經碰到了很多類似的問題，並開展了熱烈的討論。。這也是值得人深思的問題。