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

Question

我正在使用 django，我想在添加新消息时自动向下滚动 'sent or received'，由于此代码行，我可以在刷新页面时自动向下滚动：

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

Answer 1

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

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

感谢this post

你不应该做什么

window.scrollTo(0, 9999);

即使数量很大，有时网页也可以非常大。

返回目录

如果你想让它平滑滚动，那么你可以这样设置css 属性:

html {
  scroll-behavior: smooth;
}

工作示例：

const btmG = document.querySelector("#btm-good");
const btmB = document.querySelector("#btm-bad");

window.onload = () => {
  btmG.onclick = () => {
    window.scrollTo(0, document.body.scrollHeight);
  };

  btmB.onclick = () => {
    window.scrollTo(0, 9999);
  };
}

html {
  scroll-behavior: smooth;
}

<button id="btm-good"> Scroll to bottom (not 9999) </button>

<button id="btm-bad"> Scroll to bottom (is 9999) </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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Wait a sec, this isn't the bottom...<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><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

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

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

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

how to auto scroll down when new messages added

javascript

django

ajax

jquery

你不应该做什么

返回目录