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

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

-webkit-overflow-scrolling: touch

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

<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定位而且高度大於外置容器時,容器的滾動會出現卡頓閃爍現象,解決方法以下所示:spa

<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元素包裹起來,即可解決滾動閃爍問題。code

相關文章
相關標籤/搜索