javascript - 向下滚动到聊天 div 中的新消息

Question

当聊天 div 中出现新消息时，无法滚动到底部。

HTML:

<div class="content chat-body" id="messages">
    <div class="chat-message" v-for="message in messages">
        <p class="title is-6">{{ message.user.name }}</p>
        <p>{{ message.message }}</p>           
    </div>
</div>

Javascript(纯):

const messages = document.getElementById('messages');

function getMessages() {
    // Prior to getting your messages.
    shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;

    // After getting your messages.
    if (!shouldScroll) {
        scrollToBottom();
    }
}

function scrollToBottom() {
    messages.scrollTop = messages.scrollHeight;
}

scrollToBottom();

setInterval(getMessages, 100);

但是它不起作用，在控制台中抛出此错误:

未捕获类型错误:无法读取 null 的属性“scrollHeight”

更新1。通过在 vuejs 之后重新排序脚本解决了这个问题

更新2。当用户自己滚动时如何取消此滚动？

Answer 1

确保在#messages之后调用该函数:

document.addEventListener("DOMContentLoaded", function(){
  setInterval(getMessages, 100);
});