如何获得溢出:滚动显示在滚动窗口的底部

Question

我有一系列消息，我想在固定大小的窗口中显示，并使其溢出：滚动。问题是，我不希望旧消息先出现，让用户滚动到底部只查看最新消息。有没有办法让滚动窗口显示在它的底部？

Answer 1

scrollHeight是元素中内容的高度，假设该元素上没有滚动条。在下面的例子中，它是10条消息段落加在一起的高度。同样通过设置scrollTop，我们已经向下移动了滚动条。这就是你想要的：

let msgbox = document.querySelector('.msgbox');
msgbox.scrollTop = msgbox.scrollHeight; // <-- This does the trick

.msgbox {
width: 300px;
height: 300px;
border: 1px solid #000;
overflow-y: scroll;
}

<div class="msgbox">
<p>message 1</p>
<p>message 2</p>
<p>message 3</p>
<p>message 4</p>
<p>message 5</p>
<p>message 6</p>
<p>message 7</p>
<p>message 8</p>
<p>message 9</p>
<p>message 10</p>
</div>