Javascript 向下滚动至聊天室div中的新消息

当聊天室中出现新消息时，无法使工作滚动到底部

HTML:

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

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

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

---

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

确保在#消息之后调用此函数：

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

---

问题在于包含的脚本顺序，div必须在vuejs之前存在。

您的代码正常工作。我怀疑这与我将此脚本放在vuejs包含之前的顺序有关…在执行代码之前，div必须存在。是的。@AluanHaddad，这就是问题所在，谢谢你指出

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);

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