码迷,mamicode.com
首页 > 移动开发 > 详细

移动端web页面滚动不流畅,卡顿闪烁解决方案

时间:2017-11-18 18:47:57      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:导致   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页面滚动不流畅,卡顿闪烁解决方案

标签:导致   lin   hidden   卡顿   解决方法   滚动   height   内存   实现   

原文地址:http://www.cnblogs.com/mousea/p/7857507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!