Javascript scroll bottom

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);

Manuel Koch · Accepted Answer · 2017-02-23 13:45:22Z

4

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.

edited Feb 23, 2017 at 13:45

answered Feb 23, 2017 at 13:34

Manuel Koch

3613 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bauke Van der Meer Over a year ago

Love it, thank you very much :) How would you go around with the DateTime? Store it locally or database?

Manuel Koch Over a year ago

I would store it locally. In database it would only be relevant on a reload. But then you want to scroll at the bottom anyways.

Nitheesh · Accepted Answer · 2017-02-23 13:40:45Z

0

Just use simple javascript method.

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

answered Feb 23, 2017 at 13:40

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

Javascript scroll bottom

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related