Struggling to implement an automatic scroll to the bottom of a chat window when a new message appears.
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 (pure):
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);
Encountering this error message in the console:
Uncaught TypeError: Cannot read property 'scrollHeight' of null
UPDATE1. Resolved by adjusting script order after vuejs
UPDATE2. How can I disable this auto-scroll feature when the user is manually scrolling?