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

Solution 1:

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.

Solution 2:

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.

Solution 3:

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;
 }

Solution 4:

You can do that by

(scrollHeight - scrollTop()) == outerHeight()

Apply required jQuery syntax, of course...