移动端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定位并且高度大于外置容器时,容器的滚动会出现卡顿闪烁现象,解决方法如下所示:

移动端web页面滚动不流畅,卡顿闪烁解决方案
<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>
移动端web页面滚动不流畅,卡顿闪烁解决方案

可以用一个absolute容器将内部relative元素包裹起来,便可解决滚动闪烁问题。

1.当加上这个属性后,内容区域单指无法滑动必须用双指才可以,这说明你内部的内容在两个方向都能滑动,单指无法确定滑动方向,看看是不是不可滚动的方向长度给错了,或者额外添加了一些margin属性等。

2.加上后无论怎样都不能滑动了,这也是我碰到的一个蛋疼的问题,经查是由于其他同样添加了该属性的区域干扰导致的,所以不需要的滚动区域就用display:none给去掉,去掉后就不会再影响了。不过并不是同一个页面不能共存两个使用了该属性的滚动区域,测试Demo完全可以,只要小心使用便好。​

上一篇:编写一个c++工程


下一篇:『TensorFlow』读书笔记_多层感知机