在滚动到div的顶部，阿贾克斯将被载入

Question

我目前正在对其中涉及通过jQuery使用AJAX来加载聊天消息的列表，并追加他们在我的模板的div的一个Django的聊天应用程序（如chatmsg_div）。

由于聊天应用程序将被许多用户所使用，我需要为我已经成功地这样做的聊天消息进行分页。现在，聊天室中只有最后20条聊天消息才会加载，供用户查看（最新消息位于div的底部）。

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

我的问题是：

1. 我做了谷歌的一些研究，但找不到任何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 
} 

现在，实施新邮件自动滚动和当前SCRO LL是在页面的底部，你可以这样做：

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

这应该回答前提是你有足够的知识做其他任务你所有的问题。无需使用jQuery