JavaWeb开发聊天功能 聊天信息如何实现自动将其他消息上移 最新消息出现在界面下方

问题

JavaWeb开发聊天功能 聊天信息如何实现自动将其他消息上移 最新消息出现在界面下方

详细问题

笔者基于开发JavaWeb开发聊天功能，当用户处于聊天室中，若用户发送一条信息或用户接收到聊天对象的信息，若要查看信息，需要下滑，才可查看最新信息

<script>
    // ...

    socket.onmessage = function (event) {
        // ...

        let chatWindow = document.getElementById("chat-window-now");
        let container = document.createElement("div");
        // ...

        chatWindow.appendChild(container);
    };

    // ...
script>

解决方案

使用JavaScript的scrollIntoView()方法。
将以下代码片段添加到接收到消息的处理函数中：

<script>
    // ...

    socket.onmessage = function (event) {
        // ...

        let chatWindow = document.getElementById("chat-window-now");
        let container = document.createElement("div");
        // ...

        chatWindow.appendChild(container);

        container.scrollIntoView({ behavior: 'smooth', block: 'end' });
    };

    // ...
script>

解决原因

对于代码

container.scrollIntoView({ behavior: 'smooth', block: 'end' });

实现消息容器（即笔者的container对象）滚动到可视区域（即scrollIntoView函数）的末尾（即behavior: 'smooth’参数意义），并产生平滑的滚动效果（即block: 'end’参数意义）。

更多

scrollIntoView() 是 JavaScript 中的一个方法，用于将元素滚动到可视区域内。

该方法可以接受一个配置对象作为参数，用于指定滚动的行为和位置。在笔者的代码中，使用了以下配置参数：

behavior: 这个参数用于指定滚动的行为。在笔者的代码中，设置为 ‘smooth’，表示平滑滚动。这会产生一个平滑的滚动效果，而不是瞬间跳到指定位置。
block: 这个参数用于指定滚动的位置。在笔者的代码中，设置为 ‘end’，表示将元素滚动到可视区域的末尾。
通过调用 container.scrollIntoView({ behavior: ‘smooth’, block: ‘end’ })，您可以将 container 元素滚动到可视区域的末尾，并且会有一个平滑的滚动效果。

在笔者的代码中，当接收到新消息时，通过创建新的消息容器 container 并将其附加到聊天窗口，然后调用 container.scrollIntoView({ behavior: ‘smooth’, block: ‘end’ }) 将最新的消息容器滚动到可视区域的末尾。这样就能实现自动展示最新消息的效果。

请注意，scrollIntoView() 方法可以应用于其他元素，不仅限于聊天窗口中的消息容器。您可以根据需要将其应用于其他需要滚动到可视区域的元素。

参考文献

更多参考chatgpt

原创不易
转载请标明出处
如果对你有所帮助 别忘啦点赞支持哈