移動端web頁面滾動不流暢,卡頓閃爍解決方案


移動端web頁面滾動不流暢,卡頓閃爍解決方案

 

1.ios端的-webkit-overflow-scrolling屬性可控制頁面滾動效果,設置如下實現慣性滾動和彈性效果:

-webkit-overflow-scrolling: touch

2.position屬性導致的頁面滾動不流暢問題:

<div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;">
    <div style="position: relative; height: 200px;"></div>
    <div style="position: relative; height: 200px;"></div>
    <div style="position: relative; height: 200px;"></div>
</div>

如上代碼所示,當absolute定位的容器內存在relative定位並且高度大於外置容器時,容器的滾動會出現卡頓閃爍現象,解決方法如下所示:

復制代碼
<div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;">
    <div style="position: absolute; top: 0; left: 0;">
        <div style="position: relative; height: 200px;"></div>
        <div style="position: relative; height: 200px;"></div>
        <div style="position: relative; height: 200px;"></div>
    </div>
</div>
復制代碼

可以用一個absolute容器將內部relative元素包裹起來,便可解決滾動閃爍問題。

1.當加上這個屬性后,內容區域單指無法滑動必須用雙指才可以,這說明你內部的內容在兩個方向都能滑動,單指無法確定滑動方向,看看是不是不可滾動的方向長度給錯了,或者額外添加了一些margin屬性等。

2.加上后無論怎樣都不能滑動了,這也是我碰到的一個蛋疼的問題,經查是由於其他同樣添加了該屬性的區域干擾導致的,所以不需要的滾動區域就用display:none給去掉,去掉后就不會再影響了。不過並不是同一個頁面不能共存兩個使用了該屬性的滾動區域,測試Demo完全可以,只要小心使用便好。​


免責聲明!

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



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