javascript - 滚动到 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);

其中内容是消息的DOM容器

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

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

现在，要实现新消息的自动滚动并且当前滚动位于页面底部，您可以这样做:

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

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