Javascript滚动底部

Question

我已经构建了一个人们可以聊天的小聊天室。 它可以与AJAX一起使用，它可以记录并放置它们。

除了一个小问题，一切正常。 每次调用AJAX时，我都希望它将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。

Answer 2

只需使用简单的javascript方法。

$(document).ready(function() { 
    var objDiv = document.getElementById("chat"); 
    objDiv.scrollTop = objDiv.scrollHeight; 
});