javascript - 如何保持滚动条始终在底部？

Question

我在 div 元素中有一个滚动条，最初它的位置是顶部。每当我向 div 元素添加一些文本时，滚动条就不会移动。有什么办法，div 元素位置的滚动条将始终位于底部，每当我向 div 元素添加一些文本时，滚动条也会自动转到底部？

这是我的 div 元素:

<div class='panel-Body scroll' id='messageBody'></div>

和 CSS 类

.scroll {
            height: 450px;
            overflow: scroll;  
        }

我需要的是，滚动条的初始位置应该是底部。

此外，当我单击发送消息时，我将消息添加到 div 元素“messageBody”。那时滚动条应该再次向下。

这是我滚动条的当前样式

我希望它永远是

提前致谢。

Answer 1

var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;