-webkit-overflow-scrolling:touch介紹和碰到的坑


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM