JQuery Detect Scroll at Bottom

Question

I wish to achieve content load when the user scrolls to the bottom of the page.

I am having a problem. It works fine on desktop browsers but not on mobile. I have imple

Answer 1

Using jquery and Strelok's getDocumentHeight() below (cheers!) I found the following worked pretty well. Testing for equality didn't work for me as the iPhone only registered a scroll value at the end of the slide which was actually greater than the document height:

$(window).scroll(function () {
  var docHeight = getDocumentHeight();         
  if ($(window).scrollTop() + $(window).height() >= docHeight) {
    // Do stuff
  }
});

Answer 2

Have you added the meta tag for iphones which sets the content size to the viewport of the phone?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

EDIT:

So I tried this on my phone (android, gingerbread) and the issue wasn't so much the code not working it was the content displayed does not force the page to scroll. As soon as I zoomed in and scrolled down more content dynamically loaded. You could try adding content until the content added is greater than $(window).height();

Answer 3

For anyone who looks here later, I solved this by adding height=device-height to the meta viewport tag:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

You can then carry on using $(document).scroll(function(){});

This worked with iOS 5

Answer 4

Bullet proof way to get document height on all browsers:

function getDocumentHeight() {
    return Math.max(
        Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
        Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
        Math.max(document.body.clientHeight, document.documentElement.clientHeight)
    );
}