Checking is near/at the bottom of the page

Question

I need to check if an element is x pixels from the bottom of the page, to dynamically load new content. currently, scrollTop and height do not match even if the bar is on the bottom.

jquery is allowed, although basic javascript would be more helpful.

Answer 1

You may want to try the following (tested in Firefox 3.5 and IE 8 only):

function pollScrollPosition() {
   var y = (document.all) ? document.body.scrollTop : window.pageYOffset;
   var max = window.scrollMaxY || 
             (document.body.scrollHeight - document.body.clientHeight);

   if ((max - y) < 100) {
      console.log('Within the bottom 100 pixels. Do Something!');
   }
}

// Check the scroll position every 250ms
setInterval(pollScrollPosition, 250);

Screenshot from the above example in Firebug: