如何在 HTML 和 JS 中自动滚动聊天窗口

Question

我正在制作一个聊天室应用程序，并希望聊天窗口自动滚动到最新的消息，因为它像任何其他聊天应用程序一样发送。目前，它向下滚动，但它不会让我滚动备份以查看以前的消息。自动滚动的代码从 getMessages() 函数开始。

<script type="text/javascript">
    var socketio = io();

    const messages = document.getElementById("messages")

    const createMessage = (name, msg) => {
        const content = `
        <div class="text">
            <span>
                <strong>${name}</strong>: ${msg}
            </span>
            <span class="muted">
                ${new Date().toLocaleString()}    
            </span>
        </div>
        `;

        messages.innerHTML += content;
    };

    socketio.on("message", (data) => {
        createMessage(data.name, data.message);
    });

    const sendMessage = () => {
        const message = document.getElementById("message")
        if (message.value == "") return;
        socketio.emit("message", {data: message.value})
        message.value = "";        
    }

    function getMessages() {

    shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;

    if (!shouldScroll) {
        scrollToBottom();
      }
    }
    function scrollToBottom() {
    messages.scrollTop = messages.scrollHeight;
      }
    scrollToBottom();
    setInterval(getMessages, 100);

</script>