CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DN0300
DN0300

Reputation: 876

Scroll down to bottom when new message is sent

I have a comment 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?

Upvotes: 4

Views: 6393

Answers (4)

Nahid Islam Shaiket
Nahid Islam Shaiket

Reputation: 395

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.

Upvotes: 2

Jonathan Blackburn
Jonathan Blackburn

Reputation: 81

@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.net/condorhauck/ak1L12pd/1/

Upvotes: 0

Sim
Sim

Reputation: 3317

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 incoming 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.

Upvotes: 5

Wowsk
Wowsk

Reputation: 3675

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

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

Upvotes: 0

Related Questions