如何在添加数据时自动滚动到 Div 的末尾

处理动态 Web 内容时，通常希望让 div 等元素自动滚动到添加新数据时的底部。这是聊天窗口或无限滚动数据表等元素的常见要求。

考虑这样一个场景：您有一个表格包含在固定高度的 div 中，并且您希望它自动滚动到末尾当添加新数据时。本文探讨了实现此行为的 JavaScript 解决方案。

JavaScript 方法

使用间隔：

如果数据添加的时间未知，您可以设置一个时间间隔来定期更新div的scrollTop属性以匹配其scrollHeight。这可以确保 div 始终滚动到底部，即使在间隔之间添加新数据也是如此。

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

在此示例中，setInterval 函数每 5 秒（5000 毫秒）运行一次，并使用其滚动高度更新 div 的scrollTop 属性。这有效地将 div 滚动到末尾。

按需实现：

如果您可以控制何时将数据添加到 div，则可以实现滚动添加新数据后通过调用以下函数手动行为：

function scrollToEnd(elem) {
  elem.scrollTop = elem.scrollHeight;
}

该函数接受一个元素作为参数，并将其scrollTop属性设置为其scrollHeight，这会将元素滚动到底部。只要将新数据添加到 div 时调用此函数即可实现所需的自动滚动效果。