Looking to enhance my application with a chat feature that automatically scrolls to the bottom of the chat page to display the latest messages.
Utilizing VueJs:
<template>
<div id="app">
<div class="comments" v-chat-scroll>
<div v-for="comment in comments">
//Content of each comment
</div>
</div>
</div>
</template>
CSS Styling:
.comments {
margin: 2.5rem auto 0;
max-width: 60.75rem;
padding: 0 1.25rem;
height: 300px;
overflow-y: scroll;
}
Typescript Implementation:
export default {
mounted() {
this.scrollToEnd();
},
methods: {
scrollToEnd() {
var container = this.$el.querySelector(".comments");
var scrollHeight = container.scrollHeight;
container.scrollTop = scrollHeight;
},
}
}
Encountering difficulty using scrollTop to set the scrollHeight value for the div. The scrollHeight appears correct (in this case, 300), but scrollTop remains at 0.
Seeking assistance from any willing individuals. Thanks in advance!