移動端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徹底能夠，只要當心使用便好。​