jQuery Detect Bottom of Page on Mobile Safari/iOS

Question

I basically want the same functionality as facebook, twitter and all those other "infinite" scroll sites work, the code im using at the moment is

jQuery(document).ready(function(){
    $ = jQuery;
        $(window).scroll(function(){
            if ($('.iosSlider').is(':visible'))
            {
                if($(window).scrollTop() + $(window).height() == $(document).height())
                {
                $.get('/our-work/fakework.php', function(data) {
                $('#mobile-thumbs').append(data);
                });
                }
             }
        });
});

This works flawlessly on all desktop browers, and even on my blackberry sometimes it works after spamming the scroll down button.

However its not once been detected on either the iphone or ipad, I assumed it was something todo with the viewport on it but who knows.

I tried using the viewport height method of

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

but this didnt seem to fix it either!

So please could somebody share some light on it please as to how to detect the bottom of the page on the iDevices!

Thanks!!

Owen

Solution 1

After debugging for ages i found out that

if($(window).scrollTop() + $(window).height() == $(document).height())

was never actually getting met, well it WAS getting met however it seems that mobile safari doesnt run any javascript WHILST the viewport is moving.

This means that unless you stop the scroll EXACTLY on the document height (no bouncy bottom thing) it would very UNLIKELY to equal the same heights.

So I simply changed the code to instead of equaling the same height, to check if it was equal or more, this way it would trigger even if it had been scrolled past!

so the fix is here below

if($(window).scrollTop() + $(window).height() >= $(document).height()){

so the modified code now looks like

jQuery(document).ready(function(){
    $ = jQuery;
        $(window).scroll(function(){
            if ($('.iosSlider').is(':visible'))
            {
                if($(window).scrollTop() + $(window).height() >= $(document).height())
                {
                $.get('/our-work/fakework.php', function(data) {
                $('#mobile-thumbs').append(data);
                });
                }
             }
        });
});

and its now working like a charm!

Solution 2

Fully working multibrowser and multidevice-compatible solution:

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

And then....

$(window).scroll(function() {
     var docHeight = getDocumentHeight();
     if($(window).scrollTop() + window.innerHeight == docHeight)
                 {
                      // enter your code here
                 }
        });

Don't forget about viewport meta too:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Solution 3

I had the same issue. The code snippet works fine on desktop but not on iOS mobile devices. After replacing document with body the issue was fixed. Also, it's better to check if you're near bottom of the screen:

if($(window).scrollTop() + $(window).height() > $('body').height() - 200)