I have a ment box and I am using following JS to set scroll to bottom and for it scroll down when new message is posted.

window.setInterval(function() {
  var elem = document.getElementById('Commentbox');
  elem.scrollTop = elem.scrollHeight;
}, 500);

It kind of works, when a new message is posted it scrolls down, but when I scroll up to look at old messages it scrolls me back down. Is there a way to prevent from that from happening?

I have a ment box and I am using following JS to set scroll to bottom and for it scroll down when new message is posted.

window.setInterval(function() {
  var elem = document.getElementById('Commentbox');
  elem.scrollTop = elem.scrollHeight;
}, 500);

It kind of works, when a new message is posted it scrolls down, but when I scroll up to look at old messages it scrolls me back down. Is there a way to prevent from that from happening?

• javascript
• jquery
• html
• css

• Why are you using interval here? Interval means that your function will run every x mil seconds, in your case, it scrolls every half a second. – MorKadosh Commented Apr 13, 2016 at 18:28

4 Answers 4

I wouldn't use an interval function to scroll down, cause you scroll every 500 millis with your implementation. I think you have a function, that adds new messages and is called on ining messages:

function addMessage() {
   // here you add the new message to DOM
   // ...

   // then you can scroll down once to show the new messages
   var elem = document.getElementById('Commentbox');
   elem.scrollTop = elem.scrollHeight;
}

If you post the code how you add your new messages, i can help you better.

Because the correct solution was not working for me, I did something like this:

$('.your-div-class').scrollTop($('.your-div-class').height()*$('.your-div-class').height());

How I came up with the idea?

1. First I found the height of the div I want to auto-scroll by writing in the console of the browser:

   console.log($('.your-div-class').height());.

2. Then I found the scrollTop value:

   console.log($('.your-div-class').scrollTop());.

3. Then I put this in the console:

   $('.your-div-class').scrollTop($('.your-div-class').height()*$('.your-div-class').height());,

   and found out that it only takes me half way down and realized,

   $('.your-div-class').scrollTop($('.your-div-class').height()*$('.your-div-class').height());

   would take me scrolled enough downwards.

If it doesn't work for you. You can use: $('.your-div-class').scrollTop($('.your-div-class').height()*1000);. This should work for you just fine.

Set the interval as a variable and then clear the interval when the scrolling down is pleted, using window.clearInterval().

var timer = window.setInterval(function() {
  var elem = document.getElementById('Commentbox');
  elem.scrollTop = elem.scrollHeight;
  window.clearInterval(timer);
}, 500);

@Wowsk has a good answer, but your follow up question sounds like you are looking for a slight difference in functionality. I think this should get you there, but I've not tested it yet.

var lastScrollTop = 0;
var elem = document.getElementById('Commentbox');

var timer = window.setInterval(function() {
  elem.scrollTop = elem.scrollHeight;
  lastScrollTop = elem.scrollTop
}, 500);

elem.addEventListener("scroll", function(){
    if(lastScrollTop < elem.scrollTop){
       window.clearInterval(timer);
    }
}, false);

I just went ahead and tested it before posting, hope it helps - refer to the fiddle: https://jsfiddle/condorhauck/ak1L12pd/1/