移动端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彻底能够，只要当心使用便好。​