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

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

未捕获的TypeError：无法读取属性'scrollHeight'为null

UPDATE1 即可。通过在vuejs

之后重新排序脚本解决了这个问题

UPDATE2 即可。当用户滚动自己时如何取消此滚动？

Answer 1

确保在#messages：

之后调用该函数

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

Answer 2

问题按附带的脚本顺序排列，div必须在vuejs之前存在。

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

2 个答案: