添加数据时如何自动滚动到div的末尾？ [复制]

Posted 2023-03-05

【中文标题】添加数据时如何自动滚动到div的末尾？ [复制]

【英文标题】：How to auto-scroll to end of div when data is added? [duplicate]

【发布时间】：2011-11-10 08:42:23

【问题描述】：

我在div 内有一个table，其样式如下：

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

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

我可以使用哪些 javascript 代码来执行此操作？如有必要，我对 JQuery 中的选项持开放态度，但更喜欢 JavaScript 解决方案。

【问题讨论】：

这不是***.com/questions/270612/scroll-to-bottom-of-div 的重复，因为正确答案需要设置计时器。

@LoneCoder：为什么？ OP没有提到计时器......他们可以在他们认为合适的任何时间执行标记副本中的滚动代码。事实是，如此笼统地说，这个问题肯定是重复的of some question here on Stack Overflow，这里提出的问题似乎足以满足上述要求。

【参考方案1】：

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

【讨论】：

你好 Valamas，它不适用于所有主流浏览器。你能帮我吗？

@Kushal 它在 chrome 上对我有用！嗨瓦拉马斯！如果您知道浏览器兼容性问题，请告诉我们。谢谢

这确实适用于 chrome 和 Firefox

你也可以试试这个：function setFocusOnDivWithId(elementId) const scrollIntoViewOptions = behavior: "smooth", block: "center" ; document.getElementById(elementId).scrollIntoView(scrollIntoViewOptions); ; setFocusOnDivWithId(elementId);

当我使用上面的代码时它工作但也给了额外的底部空白。

【参考方案2】：

如果您不知道何时将数据添加到#data，您可以设置一个间隔，每隔几秒将元素的 scrollTop 更新到它的 scrollHeight。如果是控制什么时候添加数据，只要在添加数据后调用下面函数的内部即可。

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

【讨论】：

这行得通，解决方案对我来说实际上更简单，因为我有一个将数据输入表的函数，所以我可以将代码的第 3 行添加到函数中。谢谢！

我看到了性能问题，插件在进行此类滚动时会冻结。

向下滚动 90%

@nathan 我在使用 AngularJS 并且遇到了同样的问题，我的解决方案是创建一个时间为 1 毫秒的 $timeout 包装器，这样它在添加上一个摘要周期的内容后会滚动。

我认为这不是最佳答案。如果您想向上滚动查看数据会怎样？每 5 秒。它会自动向下滚动，您无法在 5 秒内分析数据...