自动向下滚动

Question

我有一个闪电 Web 组件，当内容太多而无法容纳容器/div 的最大高度时，它会自动创建滚动条。
当添加更多内容时，组件保持在同一位置，因此用户必须使用滚动条才能看到新内容。
我宁愿它在添加新内容时自动向下滚动。
我有一个正在添加新内容的 js 函数，所以我知道什么时候需要滚动，但不知道如何滚动。

有没有办法创建一个自动滚动到 div 底部的方法？
有没有办法让它看起来光滑？

对于上下文，这是带有滚动条的 div 的 css 样式：

.main-content{
  display        : flex;
  flex-direction : column;
  overflow-y     : auto;
  padding        : 10px;
  min-height     : 0px;
  max-height     : 500px;
  }

Answer 1

您可以通过使用 javascript 中的

scrollIntoView()

方法来实现这一点。 （更多信息在这里）

我会建议这样的事情：

element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest", alignToTop: false});

（元素指的是你要定位的元素）