how to auto scroll down when new messages added-CodePudding

I am working with django , I want to scroll down auto when new messages added 'sent or received', I can scroll down auto when I refrech the page because of this code line :

$("#card-body").animate({ scrollTop: 20000000 }, "slow");

but when I send and I receive new messages the messages go down until I can't see them I have to scroll down manually this is the js code :

    <script>

        /* send message*/
        document.getElementById('send-btn-id').onclick = function (e) {
            const msg = document.getElementById('message').value;
            chatSocket.send(JSON.stringify({
                'message': msg,
                'user': me,
                'friend': friendName
            }));
            document.getElementById('message').value = "";
            
        };

        const friendName = JSON.parse(document.getElementById('friend').textContent);
        const me = JSON.parse(document.getElementById('me').textContent);

        /* set friend profile name */
        document.getElementById('friend-name').innerHTML = friendName['username'];

        /* start conversation */
        document.querySelector('.start-conversation').innerHTML = 'Start conversation with <strong>' friendName['username'] '</strong>';

        /* connection request */
        const chatSocket = new WebSocket(
            'ws://'
              window.location.host
              '/ws/chat/'
              friendName['username']
              '/'
        );

        chatSocket.onmessage = function (e) {
            const data = JSON.parse(e.data);
            var class_name = 'in';
            var profile_image = '{{friend_obj.profile.image.url}}';

            if(me['username'] == data.user['username']) {
                data.user['username'] = 'Me';
                class_name = 'out';
                profile_image = '{{request.user.profile.image.url}}';
            }

            var chat_list = document.querySelector('#chat-list-id');
            var chat = "<li class=\"" class_name "\"><div class=\"chat-img\"><img alt=\"avatarchat\" src=\"" profile_image "\"></div><div class=\"chat-body\"><div class=\"chat-message\"><h5>" data.user['username'] "</h5><p>" data.message "</p></div></div></li>";
            
            chat_list.innerHTML  = chat;
        };
        
    </script>

CodePudding user response：

If you want to do this easily, you can do the following:

window.scrollTo(0, document.body.scrollHeight);

Thanks to this post

If you want it to scroll smoothly, then you can set this css property:

html {
  scroll-behavior: smooth;
}

Working example:

document.querySelector("#btm").addEventListener("click", () => {
  window.scrollTo(0,document.body.scrollHeight);
})

html {
  scroll-behavior: smooth;
}

<button id="btm">Scroll to bottom!</button>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Hi there!

CodePudding user response：

hello guys thanks to you I have found the solution and I want to share it with you and it works actually,so really thank you : I thought that I can actually make this code line in the send, hold on you will understand after watching the code : I have mentioned this before right

$("#card-body").animate({ scrollTop: 20000000 }, "slow");

and this one either :

/* send message*/
        document.getElementById('send-btn-id').onclick = function (e) {
            const msg = document.getElementById('message').value;
            chatSocket.send(JSON.stringify({
                'message': msg,
                'user': me,
                'friend': friendName
            }));
            document.getElementById('message').value = "";
            
        };

so after watching your answers I think to put the line in the //send message like this :

/* send message*/
        document.getElementById('send-btn-id').onclick = function (e) {
            const msg = document.getElementById('message').value;
            chatSocket.send(JSON.stringify({
                'message': msg,
                'user': me,
                'friend': friendName
            }));
            document.getElementById('message').value = "";
            $("#card-body").animate({ scrollTop: 20000000 }, "slow");
        };

my english is not fine but the code works, I hope it helps someone facing same problem.