背景
在前端开发中，Flexbox 布局已经成为了一种非常流行的方式。在使用 Flexbox 布局时，我们经常会用到 overflow 属性来控制滚动。但是，当我们在长时间滚动时，会发现页面会出现闪烁的问题，这给用户带来了非常不好的体验。那么，如何解决这个问题呢？
问题分析
为了更好地理解这个问题，我们需要先了解一下浏览器的重绘和回流机制。当我们对 DOM 元素进行修改时，浏览器会重新计算元素的样式，并重新渲染页面。这个过程被称为回流。而当元素的样式发生变化时，浏览器会重新绘制元素，这个过程被称为重绘。
在使用 Flexbox 布局时，由于浏览器需要不断地重新计算元素的样式，所以长时间滚动就会触发频繁的回流和重绘，导致页面出现闪烁的问题。
解决方案
为了解决这个问题，我们需要减少回流和重绘的次数。其中，回流的成本比重绘的成本更高，所以我们需要尽可能地减少回流的次数。具体来说，我们可以采取以下措施：
1. 使用 translate 替代 top 或 left
在使用 Flexbox 布局时，我们经常会使用 top 或 left 属性来控制滚动。但是，这种方式会触发回流，导致页面出现闪烁。为了避免这个问题，我们可以使用 translate 属性来代替 top 或 left。translate 不会触发回流，可以有效地减少页面的闪烁。
------- - ---------- ------------ --- -
2. 使用 will-change 属性
will-change 属性可以告诉浏览器元素的哪些属性将要发生变化，从而让浏览器提前做好准备。这样可以减少回流和重绘的次数，提高页面的性能。
------- - ------------ ---------- -
3. 使用 requestAnimationFrame
requestAnimationFrame 是一个浏览器提供的 API，可以让我们在下一帧开始渲染之前执行一些操作。在滚动时，我们可以使用 requestAnimationFrame 来触发滚动事件，从而减少回流和重绘的次数。
-------- -------- - ------------------------------------- -- -- --------- -
总结
在使用 Flexbox 布局时，长时间滚动会导致页面出现闪烁的问题。为了解决这个问题，我们可以采取以下措施：使用 translate 替代 top 或 left，使用 will-change 属性，使用 requestAnimationFrame。这些措施可以有效地减少回流和重绘的次数，提高页面的性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656931f6d2f5e1655d1bde8c