【雜談】小記一個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的同窗已經碰到了不少相似的問題，並開展了熱烈的討論。。這也是值得人深思的問題。