前段時間，除了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);但是經測試並沒有用