添加新消息时如何自动向下滚动答案

【问题标题】：how to auto scroll down when new messages added添加新消息时如何自动向下滚动
【发布时间】：2022-01-20 18:31:25
【问题描述】：

我正在使用 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>

【问题讨论】：

stackoverflow.com/questions/11715646/…

标签： javascript jquery django ajax

【解决方案1】：

如果您想轻松做到这一点，可以执行以下操作：

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

感谢this post

如果你想让它平滑滚动，那么你可以设置这个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!

【讨论】：

【解决方案2】：

大家好，谢谢你们，我找到了解决方案，我想和你们分享它，它确实有效，所以真的谢谢你们：我以为我真的可以在发送中制作这个代码行，等等看代码你就会明白：这个我前面已经提过了

$("#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");
        };

我的英文不好，但代码可以，我希望它可以帮助遇到同样问题的人。

【讨论】：