起因

?

• • 起因
  • -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。我也只是按照自己的思路從新整理一下。 侵刪。

轉載于:https://www.cnblogs.com/hrone/p/10143960.html

總結

以上是生活随笔為你收集整理的移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。