jQuery Detect Ende der Seite auf Mobile Safari/iOS

Question

ich im Grunde die gleiche Funktionalität wie Facebook, Twitter wollen und all die anderen „unendlich“ Scroll-Websites arbeiten, wird der Code im zur Zeit verwendet, ist

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

Diese funktioniert einwandfrei auf allen Desktop-Browsern und sogar auf meinem Blackberry funktioniert es manchmal nach dem Spammen der Bildlauf-Taste.

Allerdings wurde es nicht einmal auf dem iPhone oder iPad erkannt, ich nahm an, dass es etwas mit dem Darstellungsfeld auf es war, aber wer weiß.

Ich versuchte, die Darstellungshöhe Methode der

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

aber dies schien nicht verwendet es entweder zu reparieren!

Bitte teilen Sie uns bitte etwas Licht, damit Sie den unteren Teil der Seite auf den iDevices erkennen können!

Danke !!

Owen

Answer 1

Nach Alter Debuggen fand ich heraus, dass

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

wurde nie getroffen zu werden, auch wurde es erfüllt jedoch scheint es, dass mobile Safari jede Javascript laufen doesnt während das Ansichtsfenster bewegt .

Dies bedeutet, dass, wenn Sie die Schriftrolle GENAU auf die Höhe des Dokuments (keine federnd untere Sache) stoppen, es UNGLAUBLICH, die gleichen Höhen gleich zu sein.

Also habe ich einfach den Code geändert, anstatt gleich hoch zu sein, um zu prüfen, ob es gleich oder mehr war, so würde es auch auslösen, wenn es vorbeigescrollt worden wäre!

so das Update ist hier unten

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

so der modifizierte Code sieht nun wie

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

und seine jetzt wie ein Zauber funktioniert!

Answer 2

Ich hatte das gleiche Problem. Das Code-Snippet funktioniert auf dem Desktop, aber nicht auf iOS-Mobilgeräten. Nach dem Ersetzen von document durch body wurde das Problem behoben. Außerdem ist es besser, zu überprüfen, ob Sie in der Nähe von unteren Rand des Bildschirms sind:

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

Answer 3

voll funktionsfähiges Multibrowser und Multidevice-kompatible Lösung:

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

Und dann .. ..

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

Vergessen Sie nicht über Ansichtsfenster meta zu:

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