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

回答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!

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

回答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)

回答4:

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

来源：https://stackoverflow.com/questions/11172917/jquery-detect-bottom-of-page-on-mobile-safari-ios

标签

iphone

scroll

detect