什么是横向滚动条闪烁问题
在一些网站的横向滚动条部分，当我们快速滑动鼠标滚轮时，会发现滑动条来回闪烁。这是因为在 CSS 盒模型中，横向滚动条的宽度会被当做其子元素的 padding 和 border 区域的一部分，而滚动条的位置又是由 padding 和 border 位置控制的。这造成了一个问题：当我们滚动网页时，padding 和 border 的位置不停地变化，就会影响到滚动条的位置，从而导致闪烁问题。
解决方法
为了解决横向滚动条闪烁问题，我们可以使用 Flexbox 布局来解决。Flexbox 布局是一种新的 CSS 布局模式，用于更加灵活和自适应地排列元素。在 Flexbox 布局中，我们可以使用 flex 属性来控制元素的宽度和高度，并使用 overflow-x 属性来隐藏横向滚动条。
用 Flexbox 控制宽度
在传统的 CSS 布局中，我们通常使用 float 和 position 属性来控制元素的宽度和位置。在 Flexbox 布局中，我们可以使用 flex 属性来更方便地控制元素的宽度和高度。我们可以把需要排列的子元素放在一个父元素中，并设置该父元素的 display 属性为 flex，如下所示：
------- -
-------- -----
-然后，我们可以通过设置子元素的 flex 属性来控制它的宽度和高度。flex 属性包含三个子属性：flex-grow、flex-shrink 和 flex-basis。flex-grow 属性控制元素的扩展比例，flex-shrink 属性控制元素的收缩比例，而 flex-basis 属性则控制元素的基本大小。我们可以使用这三个属性来控制子元素的宽度和高度。
下面是一个例子，展示如何使用 Flexbox 布局来控制子元素的宽度和高度：
---- ---------------
---- ---------------------
---- ---------------------
---- ---------------------
------------- -
-------- -----
---------------- -------------
------------ -------
------- -----
-
------ -
----- - - -----
------- -----
----------- -------
------------ -----
-在以上代码中，我们使用 display: flex 属性将 .parent 元素设置为 Flexbox 布局。然后，我们使用 flex: 1 1 auto 属性将 .child 元素设置为自适应宽度和高度，并使用 height: 100% 属性将其高度设置为和父元素一样。最后，我们使用 text-align: center 和 line-height: 50px 属性来对齐子元素的内容。
使用 overflow-x 隐藏横向滚动条
在使用 Flexbox 布局时，我们可以使用 overflow-x 属性来隐藏横向滚动条。overflow-x 属性控制元素的横向内容溢出如何处理。默认情况下，横向内容溢出会自动产生横向滚动条。但是，我们可以将其设置为 hidden，以隐藏横向滚动条。
------- -
-------- -----
----------- -------
-在以上代码中，我们设置了 .parent 元素的 overflow-x 属性为 hidden，以隐藏横向滚动条。这样，即使子元素的宽度超过了父元素的宽度，也不会出现横向滚动条，从而解决了横向滚动条闪烁的问题。
结论
Flexbox 布局是一种灵活、简单且自适应的 CSS 布局模式。它可以帮助我们更方便地控制子元素的宽度和高度，并使用 overflow-x 属性来隐藏横向滚动条，从而解决横向滚动条闪烁问题。在开发中，我们应该尽可能使用 Flexbox 布局来解决布局问题，以提高效率和效果。
示例代码：https://codepen.io/zhang2018/pen/abwGEjZ
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670261fed91dce0dc84744b2