发送新消息时如何滚动到页面底部 - Socket.io答案

【问题标题】：How to scroll to bottom of page, when a new message is sent - Socket.io发送新消息时如何滚动到页面底部 - Socket.io
【发布时间】：2019-08-17 09:01:04
【问题描述】：

我正在尝试在网页上创建一个聊天应用程序。我有一个正在发送的消息列表。问题是，最新消息不会使页面自动滚动到该消息。

我试过了：

socket.on('chat message', function (msg) {
                    $('#messages').append($('<li>').text(msg));
                    // then you can scroll down once to show the new messages
                    var elem = document.getElementsByName('#messages');
                    elem.scrollTop = elem.scrollHeight;
                });

我也尝试过使用溢出：滚动选项没有运气。以及位置：css 形式中的相对选项（这有点工作，但不幸的是，文本框在开始时位于网页的顶部，跟随消息向下 - 看起来像这样:)

我面临的问题似乎很像这个堆栈溢出页面

Scroll HTML page before it 'reaches' the bottom

但我没看懂标记为已解决的答案

这是我目前在我的 html 文档中的代码：

<!doctype html>

<html>
<head>
    <title>HF-Chat</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <style>

        /* width */
        ::-webkit-scrollbar {
            width: 6px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: #2F3136; 
            border-radius: 5px;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #202225; 
            border-radius: 5px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 13px Roboto;
            color:#DCDDDE;
            background-color: #36393F;
        }

        form {
            background: #36393F;
            padding: 3px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

            form input {
                background: #484C52; 
                color:#DCDDDE;
                border: 0;
                padding: 10px;
                width: 90%;
                margin-right: .5%;
                margin-left: .2%;
                margin-bottom: .2%;
                border-radius: 5px;
                outline-color: transparent;
            }

            form button {
                width: 9%;
                background: #7289DA;
                border: none;
                padding: 10px;
                margin-bottom: .2%;
                border-radius: 5px;
            }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 5px;
            padding-bottom: 50px; /*Sets the distance between the textbox and bottom message once enough messages has been sent for the scrollbar to appear */
        }

            #messages li {
                padding: 5px 10px;
                background: #36393F;
                border-bottom: 1px solid #484C52;
            }

                #messages li:nth-child(odd) {
                    background: #36393F;
                }
    </style>
</head>

<body>
    <div>
        <ul id="messages"></ul>
        <script src="/socket.io/socket.io.js"></script>
        <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
        <script>
            $(function () {
                var socket = io();

                $('form').submit(function (e) {
                    e.preventDefault(); // prevents page reloading

                    if ($('#m').val().startsWith("/")) {
                        socket.emit('user command', $('#m').val());
                    }
                    else{
                        socket.emit('chat message', $('#m').val());
                    }
                    $('#m').val('');
                    return false;
                });
                socket.on('chat message', function (msg) {
                    $('#messages').append($('<li>').text(msg));
                    // then you can scroll down once to show the new messages
                    var elem = document.getElementsByName('#messages');
                    elem.scrollTop = elem.scrollHeight;
                });        
            });
        </script>
    </div>
    <form action="">
        <input id="m" autocomplete="off" /><button><font color="#DCDDDE">Send</font></button>
    </form>
</body>
</html>

【问题讨论】：

标签： javascript html css node.js socket.io

【解决方案1】：

尝试使用.animate滚动

const $li = $('<li>').text(msg);
$('#messages').append($li);

$('html, body').animate({
   scrollTop: $li.offset().top
}, 2000); // change the animation delay to whatever you like

【讨论】：

完美运行！非常感谢：D 过去 3 天我一直在尝试解决这个问题，哈哈唯一要记住的事情是，对于那些可能正在寻找解决方案的人来说。您可能想将动画延迟设置为 0 而不是 2000，因为当您向上滚动时，动画会使消息看起来像改变了位置！非常感谢并感谢您的帮助！

【解决方案2】：

获取元素的顶部偏移量

var offset = $('.element').offset().top;
$('html, body').animate({
    scrollTop: offset
})

【讨论】：

欢迎来到 Stack Overflow。虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。 How to Answer

【解决方案3】：

我喜欢事件监听器：

document.addEventListener(
    "load",
    function(event) {
        event.composedPath().forEach(function(dom) {
            if (dom.classList && dom.classList.value === "classOfLoadedContent") {
                $(".div-to-be-scrolled").scrollTop($(".content").innerHeight());
            }
        });
    },
    true
);

【讨论】：