Как сделать автоматическую прокрутку вниз при добавлении новых сообщений

Я работаю с django, я хочу прокручивать страницу вниз автоматически, когда добавляются новые сообщения "отправленные или полученные", я могу прокручивать страницу вниз автоматически, когда я обновляю страницу из-за этой строки кода :

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

но когда я отправляю и получаю новые сообщения, сообщения уменьшаются до тех пор, пока я не могу их увидеть, мне приходится прокручивать вниз вручную. вот код js :

    <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>

Если вы хотите сделать это легко, вы можете сделать следующее:

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

Спасибо за этот пост

Если вы хотите, чтобы прокрутка была плавной, то можно установить следующее свойство css:

html {
  scroll-behavior: smooth;
}

Пример работы: 

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!

hello ребята, благодаря вам я нашел решение и хочу поделиться им с вами, и оно действительно работает, так что действительно спасибо вам: Я думал, что я действительно могу сделать эту строку кода в отправке, подождите, вы поймете после просмотра кода: Я уже говорил об этом раньше, правильно

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

и этот тоже :

/* 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 = "";
            
        };

После просмотра ваших ответов я думаю поместить строку в //send message следующим образом :

/* 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");
        };

мой английский не очень хорош, но код работает, надеюсь, он поможет кому-то, кто столкнулся с той же проблемой.

Вернуться на верх