如何仅使用 CSS 使 Div 滚动到底部？-css教程-PHP中文网

如何仅使用 CSS 使 Div 滚动到底部？

Mary-Kate Olsen

发布： 2024-12-13 22:09:59

原创

373 人浏览过

How Can I Keep a Div Scrolled to the Bottom Using Only CSS?

将溢出 Div 滚动到底部：仅 CSS 的解决方案

考虑一个将 div 容器限制为特定高度的场景动态添加内容。您希望确保它保持滚动到底部，除非用户手动向上滚动。如何在不使用 JavaScript 的情况下实现这一目标？

答案在于在 CSS 中使用 flex-direction: column-reverse 属性。此技术有效地将 div 的底部视为顶部。只要目标浏览器支持 Flexbox，结果就是一个在添加新内容时自动滚动到底部的 div。

为了说明这一点，这里有一个示例 HTML 和 CSS 代码片段：

CSS:

.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

登录后复制

HTML:

<div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Top</div>
</div>

登录后复制

通过将 flex-direction 属性设置为column-reverse，标记顺序本质上是相反的，确保内容看起来就像滚动到底部一样。此方法允许您创建一个保持滚动到底部的 div，除非用户明确向上滚动，从而优雅地解决最初的问题陈述。

以上是如何仅使用 CSS 使 Div 滚动到底部？的详细内容。更多信息请关注PHP中文网其他相关文章！