移動端丨-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屬性導致頁面卡住