自定义聊天框滚动条显示始终为底部

Question

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

Answer 1

在Javascript中，您可以尝试，假设您的div具有ID "scrolling"

document.getElementById（“scrolling”）。scrollTop = document.getElementById（“scrolling”）。scrollHeight;

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

重要的：

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

来源：

https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop

https://developer.mozilla.org/en-US/docs/DOM/element.scrollHeight

另一种解决方案：

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