Skip to content
Advertisement

Vue.js render previous chat messages without changing the postition of current messages on screen

I use v-for to render the message list. when the first batch of messages are rendered, I use scrollIntoView() on the newest one so the container scrolls to bottom. as the user scrolls up I fetch previous messages to create a seamless scroll. the problem is that when new messages are rendered, the scroll goes to the top of the container.

I tried saving the first message id in the list before updating the list with fetched messages and then scrolling back to that message but it causes a jump on the screen for a moment and is not a good user experience.

how can I prepend and render older messages to the message list so that current messages stay in their place wherever they are on the screen?

message list is stores in vuex and I update it using this action:

JavaScript

and in template:

JavaScript

versions:

JavaScript

Advertisement

Answer

I found the behavior I wanted in this Quasar component

it is an infinite scroll component but the main part is that the scroll can be in reverse which is necessary for a chat message scroll.

Advertisement