在前端开发中，Flexbox 是一个非常受欢迎和实用的布局方式。但是，在处理大量内容时，我们可能需要滚动 Flexbox 容器以便查看所有内容。那么，如何滚动 Flexbox 元素呢？
普通滚动
Flexbox 元素的滚动方式和普通元素一样，使用 CSS 属性 overflow。如果您需要滚动溢出容器的 Flexbox 元素，请将其包装在一个具有固定高度的 div 容器中，并为其设置 overflow: auto 或 overflow: scroll。
-- -------------------- ---- -------
---- -----------------------
---- ---------------------- -------
---- ---------------------- -------
---- ---------------------- -------
---
---- ---------------------- -------
------
-------
--------------- -
-------- -----
------- ------ -- ------
--------- ----- -- ---- --
-
---------- -
---
-
--------在上面的示例中，我们使用了 display: flex 来定义 Flexbox 容器，然后将其包装在一个具有固定高度的 div 容器中，并为其设置 overflow: auto，这样当内容溢出容器时会出现滚动条。
滚动到底部
有时，我们需要将 Flexbox 元素滚动到底部。这可以使用 JavaScript 和 CSS 实现。
方法一：JavaScript
这种方法使用 JavaScript 来滚动 Flexbox 容器。我们可以使用 jQuery 或纯 JavaScript。
-- -------------------- ---- -------
---- -----------------------
---- ---------------------- -------
---- ---------------------- -------
---- ---------------------- -------
---
---- ---------------------- -------
------
------- -----------------------------------------------------------
--------
------------ -
---------------------------------------------------------------------
---
---------在上面的示例中，我们使用了 jQuery 的 scrollTop() 方法滚动到底部。如果您不想使用 jQuery，可以使用纯 JavaScript。
-- -------------------- ---- ------- ---- ----------------------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- --- ---- ---------------------- ------- ------ -------- --- ------------- - ------------------------------------------ ----------------------- - --------------------------- ---------
在上面的示例中，我们使用了 scrollTop 和 scrollHeight 属性来实现滚动到底部。
方法二：CSS
这种方法使用 CSS 动画实现滚动。
-- -------------------- ---- -------
---- -----------------------
---- ---------------------- -------
---- ---------------------- -------
---- ---------------------- -------
---
---- ---------------------- -------
---- ---------------------------- ---- ---- ---
------
-------
--------------- -
-------- -----
------- ------ -- ---- --
--------------- ------- -- ---- --
--------- ------- -- ------ --
--------- --------- -- --------------------- --
-
---------- -
---
-
-------------- -
--------- --------- -- --------- --
------- -- -- ---- --
------- ---- -- ------ --
------ ---- -- ------ --
---------- ------ -- ------ --------- -- -- --
-
---------- ------ -
-- - ---------- -------------- -
---- - ---------- ------------------ - -- ---- --
-
--------在上面的示例中，我们使用了 flex-direction: column 来垂直排列 Flexbox 元素，并将父级容器（Flexbox 容器）的 overflow 属性设置为 hidden 以隐藏溢出内容。然后，我们添加了一个锚点（scroll-anchor），并使用 CSS 动画将其滚动到底部。
总结
以上是关于如何滚动 Flexbox 元素的方法。使用普通的 overflow 属性可实现普通滚动，而使用 JavaScript 或 CSS 动画可实现滚动到底部。选择合适的滚动方式将使您的网站更加用户友好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e842b5f6b2d6eab33c78a9