jquery - 您可以使用 FIFO 使可滚动的 div 保持回滚的大小吗

Question

所以我有一个带有以下css的div容器

#game-container {
background-color: #000000;
color: #ffffff;
border: thick solid #808080;
height: 400px;
word-wrap: break-word;
overflow: auto;}

我还使用此功能将滚动条保持在容器底部。

function scrollToBottom(container) {
        var messages = $(container);
        messages.scrollTop(messages[0].scrollHeight);
    }

它按预期工作，并且随着数据附加到它向上滚动的容器。我想要做的是使用维护容器内容的先进先出方法限制容器保持的回滚量。因此，如果容器包含 20 行或像素或在回滚中使用的任何测量值，它将丢弃第一个内容并在添加新内容时保持其大小，随着第一个内容的增长而丢弃第一个内容。

Answer 1

您可能希望删除容器中的第一个元素 child(ren)，直到达到最小高度。

执行此操作的最佳时机可能是在您将新内容插入容器底部之后立即执行此操作。

关于删除子元素，您可以参考此处和此处发布的答案。