Javascript 滚动底部

Question

我构建了一个小型聊天 div，人们可以在其中聊天。它与 AJAX 一起工作，AJAX 可以提取记录并放置它们。

除一个小问题外，一切正常。每次调用 AJAX 时，我都希望它将 div 向下滚动到底部。 (最新的聊天消息在底部)

但是，我不知道如何跟踪用户是否已经在聊天 div 内滚动。

如果用户在聊天中处于事件状态，我想防止“自动向下滚动”。

我该怎么做？

聊天的 HTML:

<div id="chat">
  <div id="chatoutput></div>
</div>

让它滚动到底部的 Javascript:

jQuery("#chat").scrollTop($("#chat")[0].scrollHeight);

Answer 1

如果用户曾经手动滚动过，您可以禁用自动向下滚动

$("#chat").scroll(function() {
    autoScrollEnabled = false;
}); 

不过，在向下滚动之前，您必须检查 autoScrollEnabled。

if (autoScrollEnabled) {
  jQuery("#chat").scrollTop($("#chat")[0].scrollHeight);
}

您还可以存储一个 DateTime 值来检查用户上次滚动的时间，如果是在 1 分钟前，则启用 autoScroll。