javascript - 自定义聊天框滚动条始终显示在底部

Question

我有一个自定义聊天框。我添加了溢出-y 来滚动。现在，每当我在文本框中写东西时，它都会出现在滚动条窗口中。如何让滚动条窗口显示我写的最后一条消息，在我的情况下它总是显示在顶部。

score 1 · Accepted Answer

在 Javascript 中你可以尝试，假设你的 div 有 id"scrolling"

document.getElementById("scrolling").scrollTop = document.getElementById("scrolling").scrollHeight;

其中 scrollTop 是对象滚动的像素数，scrollHeigth 是元素内容的总高度，包括由于溢出而不可见的内容。

重要的：

每次聊天框中出现新消息时都应执行上述代码，为此它应该位于脚本中的正确位置。

来源：

另一种解决方案：

也许您也可以通过为消息设置一个锚点（#idOfLastMessage），然后使用 iframe 而不是指向 www.yoursite.com/url-of-the-message-list#idOfLastMessage 的 div 来做到这一点

1 回答 1