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

Question

我有一个自定义的聊天框。 我添加了溢出y来滚动。 现在，每当我在文本框中输入内容时，它就会出现在滚动条窗口中。 如何使滚动条窗口显示我写的最后一条消息，就我而言，它总是显示顶部。

Answer 1

在Javascript中，您可以尝试使用div的id为"scrolling"

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

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

重要：

每次在聊天框中出现新消息时，都应执行上述代码，这样做应该将其放置在脚本的正确位置。

资源：

https://developer.mozilla.org/zh-CN/docs/DOM/element.scrollTop

https://developer.mozilla.org/zh-CN/docs/DOM/element.scrollHeight

另一个解决方案：

也许您也可以通过为消息添加锚点（#idOfLastMessage），然后使用iframe而不是div（指向www.yoursite.com/url-of-the-message-list#idOfLastMessage）来完成此操作