You have created this superb chat in Vue js but struggle to keep the last chat at the bottom of your container?

The answer is Autoscrolling at the right time and right place!

In this example, we will be pulling our chats from a Laravel Eloquent query(a collection).

Your first goal is to detect the ID of the main container and set it to scrollTop and scrollHeight

1. In your methods add this:

methods: {
    autoScrollChat(){
        var element = document.getElementById("scroll-chat-bottom");
        element.scrollTop = element.scrollHeight;
    },

2. In your Div and ul, li add this:

{{item.message}}

The .slice().reverse() will simply reverse the entire chat from top to bottom having the latest message at the bottom.

3)All you have to do now is add this call in your ajax response so the method is triggers after your chats are fetched:

setInterval(this.autoScrollChat,1000);

If this tutorial was very useful to you, please leave us a message and please share the page!

Best tutorials on Kollox.com!