Determining when scrolled to bottom of a page with Javascript

Question

I'm trying to determine when I've scrolled to the bottom of the page (without using any JS library), but so far, I'm a bit confused over which one of the following to use. The most promising one I've seen is window.scrollY, but even when scrolled to the bottom of the page, it never matches the value of window.innerHeight. What's the best way to do this?

window.innerWidth
window.innerHeight

window.outerWidth
window.outerHeight

window.scrollX
window.scrollY

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollTop
document.body.scrollLeft

document.body.offsetTop
document.body.offsetLeft
document.body.offsetWidth
document.body.offsetHeight

Why take the hassle of dealing with events manually instead of using a JS library like jquery? — ThiefMaster, May 12 '10 at 08:38
Because if you don't understand how to do it you won't be able to build libraries like jquery — Woot4Moo, Oct 14 '10 at 19:53

score 26 · Accepted Answer · answered May 12 '10 at 09:01

when window.innerHeight + document.body.scrollTop is greater than or equal to document.body.offsetHeight then you are at bottom

but since IE has issues with these properties you need to use alternative properties, like

document.documentElement.scrollTop for the scroll and document.documentElement.clientHeight for the window height

full code: http://jsbin.com/egegu3/6/edit

score 6 · Answer 2 · answered May 12 '10 at 08:37

Being a lazy person at heart, I would put an element to the very bottom of the DIV, and apply the "element in view" jQuery plugin on it. (Disclaimer: I have no own experience with it but it looks good.)

A slight variation of the example from the blog entry:

$('#bottomDIV').bind('inview', function (event, visible) {
  if (visible == true) {
    // element is now visible in the viewport
    highlightButtons(); // or whatever you want to do in the context
  }
});

score 4 · Answer 3 · answered Oct 12 '17 at 20:29

This works fine:

 window.onscroll = function()
 {
    var scrollHeight, totalHeight;
    scrollHeight = document.body.scrollHeight;
    totalHeight = window.scrollY + window.innerHeight;

    if(totalHeight >= scrollHeight)
    {
        console.log("at the bottom");
    }
}

Determining when scrolled to bottom of a page with Javascript

3 Answers3

Linked