jQuery Detect dołu strony na Mobile Safari/iOS

Question

Chcę zasadniczo taką samą funkcjonalność jak Facebook, Twitter i te wszystkie inne „infinite” miejsc rollwerk IM kod używając w tej chwili jest

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

ten działa bezbłędnie na wszystkich komputerowych przeglądarkach, a nawet na moim BlackBerry czasami działa po spamowaniu przycisku przewijania w dół.

Jednak nie raz wykryto go na iPhonie lub iPadzie, więc założyłem, że to coś w tym stylu, ale kto wie.

Próbowałem przy użyciu metody wysokość rzutni z

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

ale to nie wydaje się to naprawić albo!

Więc proszę, niech ktoś podzieli się z nami informacjami na temat wykrywania dolnej części strony w systemie iDevices!

Dzięki!

Owen

Answer 1

Po debugowania dla wieku i okazało się, że

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

nigdy faktycznie spotkał zaczyna, dobrze Robiło spotkał jednak wydaje się, że safari mobile doesnt uruchomić dowolny skrypt podczas gdy rzutnia jest w ruchu .

Oznacza to, że jeśli nie zakończysz przewijania DOKŁADNIE na wysokości dokumentu (bez dmuchanej dolnej rzeczy) byłoby bardzo NIEZWŁOCZNIE równe tej samej wysokości.

Po prostu zmieniłem kod zamiast równać się tym samym wzrostem, aby sprawdzić, czy był równy lub większy, w ten sposób uruchomiłby się, nawet gdyby był przewinięty obok!

więc poprawka jest tutaj poniżej

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

tak zmodyfikowany kod teraz wygląda

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

i jego teraz działa jak czar!

Answer 2

Miałem ten sam problem. Fragment kodu działa dobrze na komputerach, ale nie na urządzeniach mobilnych z iOS. Po wymianie document z body problem został rozwiązany. Również, to lepiej, aby sprawdzić, czy jesteś blisko dolnej części ekranu:

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

Answer 3

Całkowicie pracy multibrowser i multidevice kompatybilne rozwiązanie:

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

A potem .. ..

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

Nie zapomnij o rzutni meta TOO:

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