当数据添加时如何自动滚动到div的底部？

Question

我有一个带以下样式的div内的table：

#data {
    overflow-x:hidden;
    overflow-y:visible;
    height:500px;
}

当表格中添加足够的数据时，将显示垂直滚动条。但是，当添加新数据时，我希望 div 元素自动滚动到底部。

我应该使用什么 JavaScript 代码来实现这个功能？如果必要，我也可以接受 JQuery 的方案，但更倾向于使用纯 JavaScript。

- Drew Galbraith

---

这不是https://dev59.com/jHVC5IYBdhLWcg3whBaj的重复，因为正确的答案需要设置一个计时器。 - Bryan Legend

@LoneCoder：为什么？OP没有提到计时器...他们可以在任何时间执行标记重复中的滚动代码。事实是，这个问题如此广泛地陈述，肯定是Stack Overflow上某些问题的重复，并且这里提出的建议似乎足够有用，以满足上述要求。 - Peter Duniho

Answer 1

如果你不知道何时会向#data添加数据，你可以设置一个时间间隔，每几秒钟更新元素的scrollTop到其scrollHeight。如果你控制何时添加数据，只需在添加数据后调用以下函数的内部。

window.setInterval(function() {
  var elem = document.getElementById('data');
  elem.scrollTop = elem.scrollHeight;
}, 5000);

- VNO

---

这个方法很好，对我来说解决方案实际上更简单，因为我有一个单一的函数将数据输入表格，所以我只需要将你的代码第三行添加到函数中即可。谢谢！ - Drew Galbraith

我曾经看到过性能问题，插件在进行这种类型的滚动时会冻结。 - j_mcnally

它向下滚动了90%的距离。 - Natus Drew

@nathan 我使用的是AngularJS，也遇到了同样的问题。我的解决方案是创建一个1毫秒的$timeout包装器，这样它会在上一个digest周期添加内容后滚动。 - Ryan Knell

我认为这不是最佳答案。如果您想向上滚动查看数据会发生什么？每5秒钟，它会自动滚动下去，您无法在5秒钟内分析数据... - karlihnos

Answer 2

var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;

- Valamas

---

您好Valamas，它不能在所有主要浏览器上正常工作。您能帮我吗？ - user3467273

@Kushal 在 Chrome 上对我有效！嗨，Valamas！如果您了解浏览器兼容性问题，是否可以告诉我们。谢谢。 - master_dodo

这在Chrome和Firefox中都有效。 - Pini Cheyni

您也可以尝试这个：function setFocusOnDivWithId(elementId) { const scrollIntoViewOptions = { behavior: "smooth", block: "center" }; document.getElementById(elementId).scrollIntoView(scrollIntoViewOptions); }; setFocusOnDivWithId(elementId);该代码片段定义了一个名为setFocusOnDivWithId的函数，它接受一个参数elementId，该参数是要聚焦的元素的ID。使用滚动选项{ behavior: "smooth", block: "center" }将页面滚动到所需元素，并将其对齐到视口中心位置。最后，使用setFocusOnDivWithId(elementId)调用该函数并传递所需元素的ID作为参数。 - Sk96

当我使用上述代码时，它可以工作，但是还会给出额外的底部空白空间。 - user3181077