How to check if scrollbar is at the bottom

Question

How can you check if the scroll bar is positioned at the bottom? Using JQuery or JavaScript

Solution 1

This is working well for my chat window. It also detects if the content isn't long enough to be scrolled.

function atBottom(ele) {
    var sh = ele.scrollHeight;
    var st = ele.scrollTop;
    var ht = ele.offsetHeight;
    if(ht==0) {
        return true;
    }
    if(st == sh - ht)
        {return true;} 
    else 
        {return false;}
}

Solution 2

You find the height of the scrolling container, then compare that to the scroll position. If they are the same, then you have reached the bottom.

<div style="overflow: auto; height: 500px">
</div>

$(document).ready(function()
{
   $('div').scroll(function()
   {
      var div = $(this);
      if (div.height() == div.scrollTop() + 1) //scrollTop is 0 based
      {
          alert('Reached the bottom!");
      }
   });
});

Edit: a little testing in a js fiddle and I realized the previous version is incorrect. You can use a DOM property to find out how much scrolling there is a perform a little math with the height of the element like so

      var div = $(this);
      if (div[0].scrollHeight - div.scrollTop() == div.height())
      {
          alert('Reached the bottom!');
      }

http://jsfiddle.net/Aet2x/1/

Solution 3

This worked for me (using jQuery):

$(document).ready(function(){
  $('div').scroll(function(){
    //scrollTop refers to the top of the scroll position, which will be scrollHeight - offsetHeight
    if(this.scrollTop == (this.scrollHeight - this.offsetHeight)) {
      console.log("Top of the bottom reached!");
    }
  });
});

Taken from here.

Solution 4

You can check if the element scrollTop is equal to the element innerHeight.

if($('div').scrollTop() == $('div').innerHeight()){
    //Reached the bottom
}

View more solutions

Comments

[David Hedlund]

scrollHeight was not introduced in IE until version 8, though

[Matthew Cox]

@DavidHedlund If he is looking for a IE 6 and 7 compatible approach then this won't work, you are correct. He hasn't given any details about browser support requirements.

[GlyphGryph]

This doesn't work for me - however, if I compare it to div.innerHeight instead, it works. I'm assuming margin/padding is playing into this somehow? I'm not entirely sure.

[Awais Khan]

Taken from here. helped me , as i was expecting :)