滾動到div頂部后，將加載ajax

Question

我目前正在開發一個django聊天應用程序，該應用程序涉及使用ajax加載聊天消息列表，並通過jquery將它們附加到模板中的div之一（例如chatmsg_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