CODEWITHSUNDEEP
iphonescrolldetect
owenmelbz
owenmelbz

Reputation: 6574

jQuery Detect Bottom of Page on Mobile Safari/iOS

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

Upvotes: 6

Views: 10904

Answers (4)

MD. Shafayatul Haque
MD. Shafayatul Haque

Reputation: 998

This solution will work on every device:

window.onscroll = function() {
  var d = document.documentElement;
  var offset = d.scrollTop + window.innerHeight;
  var height = d.offsetHeight;

  console.log('offset = ' + offset);
  console.log('height = ' + height);

  if (offset >= height) {
    console.log('at the bottom');
  }
}

Upvotes: 0

Nick Babkin
Nick Babkin

Reputation: 77

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">

Upvotes: 4

Peter Peng
Peter Peng

Reputation: 1958

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)

Upvotes: 2

owenmelbz
owenmelbz

Reputation: 6574

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!

Upvotes: 12

Related Questions