添加新訊息時如何自動向下滾動

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

uj5u.com熱心網友回復：

如果您想輕松完成此操作，可以執行以下操作：

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!

uj5u.com熱心網友回復：

大家好，謝謝你們，我找到了解決方案，我想與你們分享它并且它確實有效，所以真的很感謝你們：我以為我可以在發送中實際制作此代碼行，等一下你看完后就會明白代碼：我之前提到過這個

$("#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 訊息中，如下所示：

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

我的英語不好，但代碼有效，我希望它可以幫助面臨同樣問題的人。

標籤：javascript 查询 姜戈 阿贾克斯

上一篇：對在Jquery中插入JS變數感到困惑

下一篇：在wordpress中通過php和jquery傳遞變數