在移動端開發的時候經常會碰到區域滾動的需求，當然實現起來也是非常簡單的，給需要滾動的元素定高然後新增一個overflow-y:scorll自然就可以滾動了，但是新增這個屬性之後，使用chrome或者其他瀏覽器工具除錯時是支正常的，但是到手機上時滾動效果就十分的奇怪，滾動會讓人感覺有卡頓感。這個時候使用一個屬性就可以解決這個問題。-webkit-overflow-scrolling:touch，這個屬性會讓滾動條產生回彈效果，讓滾動沒有那麼生硬。
在MDN上是這麼定義這個屬性的：
-webkit-overflow-scrolling 屬性控制元素在移動裝置上是否使用滾動回彈效果. auto: 使用普通滾動, 當手指從觸控式螢幕上移開，滾動會立即停止。 touch: 使用具有回彈效果的滾動, 當手指從觸控式螢幕上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆疊上下文。
然而是不是設定了這個屬性之後就萬事大吉了呢？也不全是這樣子的，其實這個屬性也還是有一些坑的。
偶爾會卡住或不能滑動
比較常見的問題有：
- 在safari上，使用了-webkit-overflow-scrolling:touch之後，頁面偶爾會卡住不動。
- 在safari上，點選其他區域，再在滾動區域滑動，滾動條無法滾動的bug。
- 通過動態新增內容撐開容器，結果根本不能滑動的bug。
在網上也能看到別人也遇到過同樣的問題。
偶爾卡住的問題，解決方案網上眾說紛紜，遇到了很多相同的說法，比如如果卡住不動的話，就加一個z-index，就能解決該問題的說法。
在試了很多次之後，這種說法沒有一次解決過這個問題。這個說法能夠傳播出來，可能是使用者當時在使用的時候遇到了-webkit-overflow-scrolling:touch點透或者層級的問題。所以該方案不具有適用性。
下面總結一下幾種比較好的解決方案：
保證使用了該屬性的元素上沒有設定定位
如果出現偶爾卡住不動的情況，那麼在使用該屬性的元素上不設定定位或者手動設定定位為static，這樣會解決部分因為定位(relative、fixed、absolute)導致的頁面偶爾不能滾動的bug。
但是滑動到頂部繼續手指往下滑，或者到底部繼續往上滑，還是會觸發卡住的問題（其實是整個頁面上下回彈），說他算bug，其實就是ios8以上的特性，如果滾動區域大一點，使用者不會覺得這是bug，如果小了，使用者會不知道發生了什麼而卡住了。
如果新增動態內容頁面不能滾動，讓子元素height+1
如果在-webkit-overflow-scrolling:touch屬性的元素上，想通過動態新增內容來撐開容器，觸發滾動，是有bug 的，頁面是會卡住不動的。
方法就是在webkit-overflow-scrolling:touch屬性的下一層子元素上，將height加1%或1px。從而主動觸發scrollbar。
main-inner {
min-height: calc(100% + 1px)
}
複製程式碼為什麼會有卡住不動的這個bug
這個bug產生於ios8以上（不十分肯定，但在ios5~7上需要手動使用translateZ(0)開啟硬體加速）
Safari對於overflow-scrolling用了原生控制元件來實現。對於有-webkit-overflow-scrolling的網頁，會建立一個UIScrollView，提供子layer給渲染模組使用。
-webkit-overflow-scrolling:touch的其他坑
除此之外，這個屬性還有很多bug，包括且不限於以下幾種：
- 滾動中 scrollTop 屬性不會變化
- 手勢可穿過其他元素觸發元素滾動
- 滾動時暫停其他 transition
最後
如果專案中區域滾動部分不是特別多的話直接使用-webkit-overflow-scrolling:touch也不會有太大的問題，但是如果這個需求很多的話可以考慮使用better-scroll這個庫來做移動端區域滾動。
作者簡介：李成文，蘆葦科技web前端開發工程師，擅長網站建設、微信公眾號開發、微信小程式開發、小遊戲製作、企業微信製作、H5建設，專注於前端框架、互動設計、影像繪製、資料分析等研究。
個人部落格：LCW blog
歡迎和我們一起並肩作戰： web@talkmoney.cn 訪問 www.talkmoney.cn 瞭解更多
提供深圳微信公眾號製作，廣東釘釘開發，專業的企業微信外包，高價效比的微信小程式建設，靠譜的小遊戲製作，高質量的H5開發