移動端丨-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。我也只是按照本身的思路重新整理一下。 侵刪。