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

標籤：導致   lin   hidden   卡頓   解決方案   滾動   height   記憶體   實現   

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

 

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