**对于UI：**理想情况下，您的聊天应用程序应该是显示消息的页面上定义大小的div。您可以在该div中启用滚动，并将视图保留在最新消息处。
**对于消息：**一次显示N条消息，用户滚动时不应显示旧消息。
选项1用户滚动到旧消息时，从后台取消息。这里假设您有一个分页的API，可以根据页面大小和页码返回N个消息。
选项2如果您没有后台分页的API来拉取消息，那么您可以将消息存放在前端的不同数组中，并使用不同的数组渲染消息。当用户滚动时，将消息从第一个数组移动到第二个数组以呈现它们。**注意：**此方法会使网页速度变慢，因为消息数量会增加。

你可以使用Array.slice方法来完成分页。

socket.on('old_messages', (msg) => {
    let paginatedMsg = msg.slice(pageNumber * 10 - 10, pageNumber * 10);
    paginatedMsg.forEach(element => {
        let messageContent = " <p class='card'><b>" + element.username + ": </b>" + element.content + "</p>";
        MESSAGE_LIST.innerHTML = messageContent + MESSAGE_LIST.innerHTML;
    });
});

字符串
但实际上，这不是最好的收获。最佳实践是让后端根据分页选项发送数据。

您可以尝试以下操作：

const PAGE_SIZE = 10; // Number of messages per page
let currentPage = 1; // Current page number

socket.on('old_messages', (msg) => {
    // Calculate the starting index of messages for the current page
    const startIndex = (currentPage - 1) * PAGE_SIZE;

    // Extract only the messages for the current page
    const messagesForCurrentPage = msg.slice(startIndex, startIndex + PAGE_SIZE);

    // Clear the existing content
    MESSAGE_LIST.innerHTML = '';

    // Append the messages to the message list
    messagesForCurrentPage.forEach(element => {
        let messageContent = "<p class='card'><b>" + element.username + ": </b>" + element.content + "</p>";
        MESSAGE_LIST.innerHTML += messageContent;
    });
});

// Function to go to the next page
function nextPage() {
    currentPage++;
    socket.emit('get_old_messages', currentPage); // Request messages for the next page
}

// Function to go to the previous page
function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        socket.emit('get_old_messages', currentPage); // Request messages for the previous page
    }
}

字符串