JQuery detects bottom of page in Mobile Safari / iOS

Question

I basically need the same functions as facebook, twitter and all those other “endless” scroll sites, the im code currently in use,

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 browsers, and even on my blackberry sometimes works after spam-scrolling down.

However, it was never found on either the iphone or ipad, I assumed that there was something to do with it, but who knows.

I tried using the viewport height method

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

but that didn't help either!

So, please, someone can tell about him how to determine the bottom of the page on iDevices!

Thanks!!

Owen

Answer 1

After debugging for centuries, I found out that

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

I never managed to meet, well, something happened, but it seems that the mobile safari does not start javascript WHILST, which moves the viewport.

This means that if you do not stop scrolling EXACTLY at the height of the document (without the inflatable bottom thing), it will be very UNEXPECTED equal to the same heights.

So, I just changed the code instead of being the same height to check if it was equal or greater, so it would work even if it scrolls past!

therefore the fix is ​​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 now it works like a charm!

Answer 2

I had the same problem. The code snippet works fine on the desktop, but not on iOS mobile devices. After replacing document with body problem was fixed. It’s also better to check if you are at the bottom of the screen:

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

Answer 3

Fully working multi-user and multi-user 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 } }); 

Do not forget about the metaphor of views:

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