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

Answer 1

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

Answer 2

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

Answer 3

http://jsbin.com/egegu3/6/edit is perfect working under IE6 7 8 chrome and firefox