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

Question

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

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

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

我的问题是：

1. 我在google上做了一些研究，但找不到任何允许我在到达特定div的顶部时触发ajax调用的jquery函数。我对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