I need assistance with implementing chat scrolling in my VUE JS application. I would like the messages to automatically scroll to the bottom of the page each time a new message is received or when the page loads. Currently, I have a function that contains code for scrolling the page, but it seems to be functioning unexpectedly.
var container = this.$el.querySelector(".messages");
container.scrollTop = container.scrollHeight;
The scrolling does work, however, it doesn't reach the very bottom of the page. Instead, it stops at a position somewhere between the top and bottom. Strangely, if I trigger the function a second time, then it scrolls all the way down to the bottom. My goal is to have the page scroll to the bottom on the first click, without requiring two clicks. Any help would be greatly appreciated.