Determining when scrolled to bottom of a page with Javascript

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

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

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