移動端丨-webkit-overflow-scrolling:touch屬性導致頁面卡住
起因
-
- 起因
-webkit-overflow-scrolling- 問題
- 解決方案：
- 方案一
- 方案二
- 思考為什麽會出現這個問題
- 總結
故事的起因是，在一個多列表的頁面上，頁面在iOS11，跟iOS10中會發生頁面卡住，不能進行滾動。
然後就懷疑是自己的樣式寫的出了問題，就一直排查定位元素的樣式，怎麽都找不到問題所在。
但還是本著追根溯源的精神，定位到根元素的樣式上有一個
-webkit-overflow-scrolling: touch;的樣式屬性；然後查了一下該屬性：
-webkit-overflow-scrolling
屬性控制元素在移動設備上是否使用滾動回彈效果.
- auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。
- touch: 使用具有回彈效果的滾動,當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。
在移動端上，在你用overflow-y:scorll屬性的時候，你會發現滾動的效果很很生硬，很慢，這時候可以使用-webkit-overflow-scrolling:touch這個屬性，讓滾動條產生滾動回彈的效果，就像ios原生的滾動條一樣流暢。
問題
但是的但是，-webkit-overflow-scrolling:touch這個屬性真的是超級神坑，比如:
- 在safari上，使用了-webkit-overflow-scrolling:touch之後，頁面偶爾會卡住不動。(中招)
- 在safari上，點擊其他區域，再在滾動區域滑動，滾動條無法滾動的bug。
- 通過動態添加內容撐開容器，結果根本不能滑動的bug。(中招)
- 滾動中 scrollTop 屬性不會變化
- 手勢可穿過其他元素觸發元素滾動
- 滾動時暫停其他 transition
解決方案：
方案一
<div id="app" style="-webkit-overflow-scrolling: touch;
">
<div style="min-height:101%"></div>
</div>
方案二
<div id="app" style="-webkit-overflow-scrolling: touch;
">
<div style="height:calc(100%+1px)"></div>
</div>
方法就是在webkit-overflow-scrolling:touch屬性的下一層子元素上，將height加1%或1px。從而主動觸發scrollbar。
思考為什麽會出現這個問題
Safari對於overflow-scrolling用了原生控件來實現。對於有-webkit-overflow-scrolling的網頁，會創建一個UIScrollView，提供子layer給渲染模塊使用。我們也就只能解決到這了。
總結
不得不感嘆，這些神奇的黑魔法，看的奇奇怪怪但是真實 的解決了實際的問題，畢竟css本身也是就是黑魔法本黑了，更不要說移動端這個天坑了。 最後感謝一下 博主 夏大師的總結；原鏈接在此https://www.cnblogs.com/xiahj/p/8036419.html。我也只是按照自己的思路從新整理一下。 侵刪。
移動端丨-webkit-overflow-scrolling:touch屬性導致頁面卡住