jQuery: how to tell if you’re scroll to bottom?

This is a question a jQuery user asked recently. It’s a simple question without a simple answer. There is no inverse equivalent to scrollTop=0 (i.e. scrollBottom=0) so the solution requires some thought.

The scenario is this — we have a fixed height div with overflow:auto and we want to use JavaScript to programmatically scroll to bottom and also to execute some code if we’re at the bottom. Our div looks like this (using inline styles for the sake of this example):

<div id="box" style="height:300px; overflow:auto;">
  <!-- Your content goes here -->
</div>

To scroll to bottom programmatically we do:

$('#box').animate({scrollTop: $('#box')[0].scrollHeight});

And to check whether we’re scrolled to bottom:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

That’s pretty easy, right? As noticed scrollHeight is the key to this solution.

A bit of info about scrollHeight: First introduced by MSIE and supported since version 4, [1] scrollHeight gets the height of an element’s content including padding but not margins. Though scrollHeight is currently supported by all major browsers it is not part of a W3C recommendation so still considered proprietary. [2]

Now, some of you reading this might not like scrollHeight because it’s not a W3C recommendation. So for the interest of this group let’s explore an alternative solution.

Your first stab at the alternative to check whether we’re scrolled to bottom might look something like this:

if ($('#box').scrollTop() == $('#box').outerHeight()) {
  // We're at the bottom.
}

Novel, but that doesn’t work! scrollTop is quite an arbitrary value. In our case depending on which browser you choose the answer could be anything from 244px (Safari) to 289px (IE7). Clearly this is not a viable solution.

To determine whether we’re truely at rock bottom we have to get the height of the element’s content and do a calculation based on that. Now we’re immediately faced with another problem — there is no sane way of determining the actual height of an element’s content because .outerHeight() always gives 300px plus padding as the answer. We could use an inner div to get over this problem:

<div id="box" style="height:300px; overflow:auto;">
  <div class="inner">
    <!-- Your content goes here -->
  </div>
</div>

So now we have a way of determining content height we can scroll to bottom:

$('#box').animate({scrollTop: $('#box > .inner').outerHeight()});

And to check whether we’re scrolled to bottom we use the offset method:

var elem = $('#box');
var inner = $('#box > .inner');
if ( Math.abs(inner.offset().top) + elem.height() + elem.offset().top >= inner.outerHeight() ) {
  // We're at the bottom!
}

Not as striaght forward as scrollHeight aye?

Here’s a test page encompassing the stuff talked about in this article.

References:
[1] scrollHeight Property
[2] element.scrollHeight

24 Comments

  1. Thanks for the article. I ended up modifying mine a bit as your solution didn't seem to work for me (adding all three values seemed to always be bigger than the inner's outerHeight).

    I discovered there were three constant values; the inner's outer height, the container's offset top, and the container's height.

    So I need to do the following:

    if (container.height – inner.offset.top + container.offset.top) >= inner.outerHeight) THEN we reached bottom.

    Checked in IE 6&7, FF 3, Safari.

    (we'll see if the code come through unscathed)

    $(function(){

    var $box = $("#scrollbox"),

    $inner = $("> .inner", $box),

    innerOuterHeight = $inner.outerHeight();

    boxHeight = $box.height();

    boxOffsetTop = $box.offset().top;

    $("#scrollbox").scroll(function(){

    if ( Math.ceil(boxHeight – $inner.offset().top + boxOffsetTop) >= innerOuterHeight ) {

    $("#readitbttn").removeAttr("disabled").attr("title", "Continue");

    }

    });

    });

  2. adobepro at

    Thanks, your solution worked well; tested with FF 3.6 and IE8

  3. adobepro at

    Have you ever tried binding a scroll event using jquery to a scrollable tbody in IE8 using the above code instead of a DIV? I ask, because it's related, with the above using a DIV works well in both IE8/FF3.6, but when using a table/tbody [scrollable], while it works in FF 3.6 [attaching a scroll event], it doesn't work with IE8 (IE appears to do nothing, no errors either.) What I want to do is page data whenever the user reaches the bottom of the scrollable tbody — I can do this with a DIV in both IE8/FF3.6, but not with a tbody in IE8 [but it does work with FF3.6] Thanks!

  4. Wow, thanks so much! Works great!

    I have one error I'm getting in IE, when using the first solution:

    "Error:'0.scrollHeight' is null or not an object."

    Any idea what might be causing that?

    Thanks!

  5. sofia cardita at

    Thank you! You have no idea what a life-saver this was! Thanks :=)

  6. JQueryUser at

    This works fine for me.. but I can't scroll back to the top, the scrollbar is flickering at the bottom..

    Not sure why??

  7. mazhout at

    Nice and Easy.

    I use it to set several endless divs on one page.

    Thanks for sharing.

  8. Pingback: jQuery: how to tell if you’re scroll to bottom? (or aka wt is scrollHeight) « CODE@????

  9. Chris at

    This works great. Only one thing to mention. Sometimes depending on our layout this may not work as we have to use position instead of offset. Maybe that's why it didn't work for Jon-Paul

  10. Pingback: Guos Work » How to show or enable an element when scroll to bottom of a div

  11. Hey! Kudos are awarded, worked great!

    Bookmarked

  12. Had some problems with the scrollbar from my chat…but now thx to your post everything is fixed.

  13. Pingback: Detect scroll down with jQuery - Programmers Goodies

  14. Nik at

    So what if I wanted to check if I was at the top of the page?

  15. Pingback: Scrollto div | Movementsofpra

  16. Pingback: How can I use JQuery to check if a div is scrolled all the way to the bottom? - Programmers Goodies

  17. martin at

    Thankyou very much… Very useful your tips :)

  18. how to combine the code scroll up and bottom?

  19. Pingback: Quora

  20. Pingback: Loading content in table based upon scrolling position | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

  21. Pingback: Loading content in table based upon scrolling position | PHP Developer Resource

  22. Pingback: infinite scrolling stops if I zoom my browser | PHP Developer Resource