强制滚动条到底部

Question

我正在制作一个工作良好且很好的小消息/聊天系统。问题是，输出消息的<div>不会按照我需要的方式滚动。

所有新消息都会添加到div的底部，当添加更多消息并且滚动条显示时，滚动会停留在<div>的顶部。 我需要将其反转，以便滚动始终贴在<div> 的底部。

我想要的一个很好的例子是 Steam的聊天窗口，甚至是我用来填写问题的文本输入。

由于我想避免 jQuery ，这让我完全陷入困境。如果你能指出我正确的方向那将是伟大的！我不确定 HTML 和 CSS 是否可以处理此问题，或者是否需要 JavaScript 。

Answer 1

下面的Javascript代码应该像你描述的那样将div的滚动条放在底部：

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

此解决方案和更多信息可在以下链接中找到： http://web.archive.org/web/20080821211053/http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html

Answer 2

我认为这是一个更好的解决方案：

element.scrollTop = element.scrollHeight - element.clientHeight;