滚动到 div 顶部时，将加载 ajax

Question

我目前正在开发一个 django 聊天应用程序，该应用程序涉及使用 ajax 加载聊天消息列表并通过 jquery 将它们附加到我的模板中的一个 div（例如 chatmsg_div）。

由于聊天应用程序将被许多用户使用，因此我需要对已成功执行的聊天消息进行分页。现在，只会加载聊天室中的最后 20 条聊天消息供用户查看（最新消息位于 div 的底部）。

但是，我需要做的另一个要求是在滚动到 chatmsg_div 顶部时加载聊天历史记录（例如，另一个页面中的前 20 条消息）。

我的问题是：

1. 我在 google 上做了一些研究，但找不到任何 jquery 函数可以让我在到达特定 div 的顶部时触发 ajax 调用。我对 jquery 很陌生，所以即使我正在寻找的答案很明显，请原谅我。
2. 加载前 20 条聊天消息后，我希望 div 保持在我上次滚动到的位置，而不是转到 div 的顶部

到目前为止，我已经尝试过：

$('#chatmsg_div').scroll(function () { if ($(this).scrollTop() > 100) { debugger; }
});

提前感谢任何可以回答我问题的人。

Answer 1

要检查是否需要在新消息到达时滚动并且由于用户已滚动到顶部而不可见，您可以执行以下操作：

var shouldScroll = (content.scrollTop + content.offsetHeight >= content.scrollHeight);

content 是您的 DOM 消息容器

用于检测页面是否滚动到最顶部：

if (content.scrollTop == 0) {
    // load message history here
}

现在，为了实现新消息的自动滚动并且当前滚动在页面底部，您可以这样做：

if (shouldScroll) {
    content.scrollTop = content.scrollHeight;
}

只要您有足够的知识来完成其他任务，这应该可以回答您的所有问题。无需使用 jQuery