1.作用
可控制元素在移動設備有滾動回彈效果,可慣性滾動
2.適應場景
在ios移動端上,設置容器overflow-y:scroll;使容器內元素滾動時,滑動會很卡頓,使用-webkit-overflow-scrolling:touch;可以解決該問題。
原理:該屬性開啟了硬件加速
缺點:耗內存
3.引發的bug(僅ios)
3.1 在設置了該屬性的滾動容器內手動設置scrollTop時容器會變空白,(內容繪制出錯,應該是瀏覽器底層的問題)
3.2 手動設置scrollTop,某些機型上的scrollTop值改變了,但是頁面不滾動
3.3 滑動時偶爾卡頓
4.解決方案
3.1 & 3.2(規避問題):在手動改變scrollTop前先將-webkit-overflow-scrolling屬性設置為auto,scrollTop改變后再設置回touch
3.1: 可先讓頁面延時100ms再滾動1px,空白可以恢復正常
3.2:給容器的某個子元素高度加1px
3.3:給容器設置position:static