可选择的解决方案

function scrollToBottom(element) {
  element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
}

将到可滚动元素顶部的距离设置为元素的总高度。

const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight

像你一样，我正在构建一个聊天应用程序，并希望最近的消息滚动到视图中。这最终对我很有效:

//get the div that contains all the messages
let div = document.getElementById('message-container');

//make the last element (a message) to scroll into view, smoothly!
div.lastElementChild.scrollIntoView({ behavior: 'smooth' });

可选择的解决方案

function scrollToBottom(element) {
  element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
}

只是作为一个额外的片段。我正在使用angular，并试图在用户选择与用户的不同对话时将消息线程滚动到底部。为了确保在使用ng-repeat for消息将新数据加载到div之后滚动仍然有效，只需在超时时间内包装滚动片段。

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

这将确保在数据插入DOM之后触发滚动事件。

你也可以，使用jQuery，附加一个动画到html，文档的主体通过:

$（“html，body”）.animate（{scrollTop：$（“#div-id”）[0].offsetTop}， 1000）;

这将导致一个平滑的滚动到div顶部，id为“div-id”。