How to check if a DIV is scrolled all the way to the bottom with jQuery

Question

I have a div with overflow:scroll.

I want to know if it\'s currently scrolled all the way down. How, using JQuery?

This one doesn\'t work: How can I determin

Answer 1

function isScrolledToBottom(el) {
    var $el = $(el);
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}

This is variation of @samccone's answer that incorporates @HenrikChristensen's comment regarding subpixel measurements.

Answer 2

Since it works without jQuery like that :

 var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;

I do :

 var node = $('#mydiv')[0]; // gets the html element
 if(node) {
    var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
 }

Answer 3

Since 2012 Firefox contains the scrollTopMax property. If scrollTop === scrollTopMax you're at the bottom of the element.

Answer 4

For me $el.outerHeight() gives the wrong value (due to the border width), whereas $el.innerHeight() gives the correct one, so I use

function isAtBottom($el){

    return ($el[0].scrollHeight - $el.scrollTop()) == $el.innerHeight();
}

Answer 5

Here is the correct solution (jsfiddle). A brief look at the code:

$(document).ready(function () {
    $('div').on('scroll', chk_scroll);
});

function chk_scroll(e) {
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
        console.log("bottom");
    }
}

See this for more info.

Answer 6

Here is the code:

$("#div_Id").scroll(function (e) {
    e.preventDefault();
    var elem = $(this);            
    if (elem.scrollTop() > 0 && 
            (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) {
        alert("At the bottom");
    }
});