如何仅使用 CSS 使 Div 在加载时滚动到底部并保持用户滚动位置？-css教程-PHP中文网

如何仅使用 CSS 使 Div 在加载时滚动到底部并保持用户滚动位置？

Linda Hamilton

发布： 2024-12-16 16:38:18

原创

362 人浏览过

How Can I Make a Div Scroll to the Bottom on Load and Maintain User Scroll Position Using Only CSS?

动态滚动 Div 与用户滚动同步

寻求一个 div 加载时自动滚动到底部的解决方案，保持其滚动位置直到用户手动向上滚动？这个巧妙的问题探索了一种巧妙的仅 CSS 技术来实现这种效果。

理解解决方案

秘密在于使用 flex 反转 div 中元素的顺序-direction：列反向。本质上，浏览器将 div 的底部视为顶部。

实现

要实现此技术，请创建一个带有溢出的容器： auto 和在 CSS 样式中设置 flex-direction: column-reverse:

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

登录后复制

然后，确保动态内容反向放置容器内的顺序：

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

登录后复制

警告

请记住，此技术仅适用于支持 Flexbox 的浏览器。

以上是如何仅使用 CSS 使 Div 在加载时滚动到底部并保持用户滚动位置？的详细内容。更多信息请关注PHP中文网其他相关文章！