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

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

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 determine if a div is scrolled to the bottom?

Solutions/Answers:

Solution 1:

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

$(document).ready(function () {
    $('div').bind('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:

You can do that by

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

Apply required jQuery syntax, of course…

Solution 4:

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

Solution 5:

Without jquery, for onScroll event

var scrollDiv = event.srcElement.body
window.innerHeight + scrollDiv.scrollTop == scrollDiv.scrollHeight

Solution 6:

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

Related:  Moment.js: Date between dates

References