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

ゝ一纸荒年。 2023-10-11 15:24 55阅读 0赞

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

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

<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>

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: https://img-blog.csdnimg.cn/img_convert/48304ba5e6f9fe08f3fa1abda7d326ab.png

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

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

1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果，设置如下实现惯性滚动和弹性效果： -webkit-overflow-scro

ゝ一纸荒年。/ 2023年10月11日 15:24/ 0 赞/ 56 阅读

相关 iOS-界面流畅之卡顿产生的原因和解决方案

屏幕显示图像的原理![format_png][] 首先从过去的 CRT 显示器原理说起。CRT 的电子枪按照上面方式，从上到下一行行扫描，扫描完成后显示器就呈现一帧画面，随后

古城微笑少年丶/ 2023年10月08日 09:49/ 0 赞/ 56 阅读

相关笔记本卡顿不流畅是什么原因_简单解决电脑不流畅经常卡顿问题，非常有用快点看看...

![Image 1][] 打开应用保存高清大图大家是不是电脑经常出现电脑不流畅、卡顿等问题啊，简简单单陈操作设置、优化，电脑运行的流畅度一下好很多。这个的根本原因是他

男娘i/ 2023年01月01日 04:53/ 0 赞/ 185 阅读

相关 40条常见的移动端Web页面问题解决方案

倾力总结40条常见的移动端Web页面问题解决方案 2016-05-30 JavaScript 作者：佚名（本文作者可联系我们补上署名） 1、安卓浏览器看背景图片，有些设备

àì夳堔傛蜴生んèń/ 2022年09月21日 12:00/ 0 赞/ 132 阅读

相关移动页面滚动穿透解决方案（荐）

移动页面滚动穿透解决方法目前有多种解决方案，我介绍下几种方案：解决方案1：阻止冒泡。 //关键代码 $(".sliders,.modals

分手后的思念是犯贱/ 2022年08月21日 15:56/ 0 赞/ 182 阅读

相关移动端滚动穿透问题完美解决方案

本文转自：[https://uedsky.com/2016-06/mobile-modal-scroll/][https_uedsky.com_2016-06_mobile-m

一时失言乱红尘/ 2022年05月24日 07:06/ 0 赞/ 312 阅读

相关移动端禁止页面滚动

H5页面超过一屏，点击某处弹出弹出框提示，默认情况下，页面还可以滑动。解决方法： //添加禁止屏幕滚动 document.querySelector('.eleme

喜欢ヅ旅行/ 2022年05月21日 11:26/ 0 赞/ 288 阅读

相关 -webkit-overflow-scrolling解决移动端iOS滚动卡顿现象

css3中-webkit-overflow-scrolling使用方法 -webkit-overflow-scrolling: touch; //有回弹效果

╰+攻爆jí腚メ/ 2022年05月08日 14:08/ 0 赞/ 290 阅读

相关 ios h5页面滚动卡顿的解决办法

开发微信公众号网页的时候发觉iOS系统滑动页面的时候会特别卡顿，但是安卓就比较流畅。网上搜索发觉有这个css属性可以设置iOS滑动不卡顿 `-webkit-ov

今天药忘吃喽~/ 2022年04月11日 08:50/ 0 赞/ 899 阅读

相关 PyCharm 出现卡顿解决方案

PyCharm版本: 2018 运行系统: Ubuntu18.04 原因分析: 现在的电脑标配普遍都是8G以上内存了，不过很多IDE仍然是以低配电脑为

﹏ヽ暗。殇╰゛Y/ 2021年12月15日 04:05/ 0 赞/ 830 阅读