2

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.

tcooc
  • 20,629
  • 3
  • 39
  • 57
  • Is using the Infinite Scroll (http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/) plugin out of the question? – Mottie Jun 17 '10 at 01:38

1 Answers1

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:

Checking is near/at the bottom of the page

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
  • Im sorry, im using a webkit browser. "window.scrollMaxY" is undefined, and (document.body.scrollHeight - document.body.clientHeight) = 0. Its quite confusing because clientHeight is different for body compared to other elements. – tcooc Jun 17 '10 at 01:03
  • 1
    @DanielVassallo This seems to no longer work. It is always telling me that I am at the bottom of the page even when I'm at the top of a really long page. loging the values makes it appear like they all are getting the page height and not where the user is at on the page. – michaellindahl Jan 22 '13 at 19:37
  • I have simplified the code and just created this `var pixelsFromBottom = document.body.scrollHeight - (y + window.innerHeight);` – michaellindahl Jan 22 '13 at 20:01