强制滚动条到底部

Question

我正在制作一个小型的消息/聊天系统，它工作得很好。问题是，用于输出消息的 <div> 没有按照我需要的方式滚动。

所有新消息都添加到 <div> 的底部，当添加更多消息并且出现滚动条时，滚动保持在 <div> 的顶部。我需要这个反过来，使滚动始终保持在 <div> 的底部。

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

由于我想避免使用 jQuery，这让我完全陷入了困境。如果您能指导正确的方向，那就太好了！ 我不确定 HTML 和 CSS 是否能够处理此功能，或者是否根本不需要使用 JavaScript。

- grep

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

- michaelx386

Answer 2

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

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

- Rodan Sotto

Answer 3

对于 Kotlin，我使用了以下内容：

val element = view?.findViewById<ScrollView>(R.id.uidScrollElement)
    element?.smoothScrollTo(0,element.measuredHeight)

- Assay