Javascript滚动底部

Question

I've built a small chat div where people can chat. It works with AJAX which pulls to records and places them.

Everything is working fine except for a minor problem. Every time AJAX is called I want it to scroll the div down to the bottom. (Latest chat messages are on the bottom)

However, I can't figure out how to track if a user is already scrolling inside the chat div themselves or not.

I want to prevent the "auto scroll down" in case a user is active inside the chat.

How would I go around doing this?

HTML of the chat:

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

Javascript that makes it scroll to the bottom:

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

Answer 1

You can disable the auto scroll down if the user once scrolled manually:

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

You have to check autoScrollEnabled before scrolling down though.

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

You could also store a DateTime value to check when the user last scrolled and enable autoScroll if that was, say, 1 minute ago.

Answer 2

Just use simple javascript method.

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