# 關于 iOS 手機滾動的問題 `-webkit-overflow-scrolling` 究竟是什么鬼？ 一個只有 iOS 設備支持的非標準屬性。蘋果自己的解釋：指定是否在 overflow: scroll 的元素中使用“原生”的滾動方式 他包含兩個可選值：auto 和 touch - auto：就是普通的無慣性滾動效果 - touch：原生的滾動效果。使用此效果會構造一個 stacking context 什么是 stacking context？這可以說是CSS里一個陰暗面，極其晦澀。有興趣的朋友可以去看高人的解釋 : https://segmentfault.com/a/1190000002783265 ## -webkit-overflow-scrolling 引發了那些坑？ 下面列出我遇到過的坑： ### 滾動中 scrollTop 屬性不會變化。 嚴格來說，上面的 scroll 事件不觸發只是本坑的一個副作用，所以說不必考慮通過 touchmove 事件轉發 scroll 事件等點子，scroll 事件觸發了一樣檢測不到 scrollTop 屬性的變化（當然檢測手指的移動距離另說）。同樣，檢測滾動區域內部元素的 getBoundingClientRect 同樣無效。 例中起了一個無限的rAF循環不停地獲取 scrollTop 的值，然并卵。 ### 手勢可穿過其他元素觸發元素滾動 這個更奇葩。例中用一個半透明的 div 蓋在了滾動區域 ul 上面（實踐中可能是一個彈框的背部蒙版），甚至給 ul 自己加上了 pointer-events: none，手指在 div 上滑動仍然會觸發 ul 的滾動。你可以在顯示半透明蒙版時將 ul 的 -webkit-overflow-scrolling: touch 或 overflow: scroll 去掉，但是會造成屏幕明顯的閃爍。如果給 body 的 touchmove事件 preventDefault() 可以防止觸發滾動，但是是所有滾動區域都會失效。 ### 運行時通過 JS 動態添加元素溢出高度導致滾動失效 Google 上一搜一片，但是筆者沒有遇到過，或許在新版本系統中已經修正，這里不展開討論。 ### 滾動時暫停其他 transition ## 參考資料 [iOS 與 慣性滾動](http://www.cnblogs.com/chris-oil/p/6164966.html) [CSS Stacking Context 里那些鮮為人知的坑](https://segmentfault.com/a/1190000002783265)