jQuery detectar el fondo de la página en Safari Mobile/IOS

Question

Quiero básicamente la misma funcionalidad que facebook, twitter y todos los otros sitios de desplazamiento "infinitos" trabajo, el im código utilizando en este momento es

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

Este funciona perfectamente en todos los navegadores de escritorio, e incluso en mi blackberry a veces funciona después de enviar correo no deseado con el botón de desplazamiento hacia abajo.

Sin embargo, no se detectó ni una vez en el iphone ni en el ipad, supuse que era algo complicado con la ventana gráfica, pero quién sabe.

He intentado utilizar el método de altura de la ventana gráfica del

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

pero esto no parecía para solucionarlo, ya sea!

Así que por favor alguien podría compartir algo de luz sobre cómo detectar la parte inferior de la página en los iDevices.

Gracias!

Owen

Answer 1

Después de la depuración para las edades me enteré de que

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

fue en realidad nunca conseguir cumple, así que se estaba haciendo sin embargo se reunieron parece que Safari Mobile DOESNT ejecutar cualquier javascript mientras que la ventana se está moviendo .

Esto significa que a menos que detenga el rollo EXACTAMENTE en la altura del documento (sin fondo hinchable) sería MUY GRAVEMENTE igual a las mismas alturas.

Así que simplemente cambié el código a en lugar de igualar la misma altura, para comprobar si era igual o más, ¡de esta manera se dispararía incluso si hubiera sido desplazado!

por lo que la solución es aquí abajo

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

por lo que el código modificado ahora se ve como

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

y su ahora trabaja como un encanto!

Answer 2

Tuve el mismo problema. El fragmento de código funciona bien en el escritorio, pero no en los dispositivos móviles iOS. Después de reemplazar document con body, se solucionó el problema. Además, es mejor para comprobar si estás cerca de la parte inferior de la pantalla:

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

Answer 3

multibrowser y compatible con múltiples dispositivos totalmente solución de trabajo:

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

Y entonces .. ..

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

No se olvide de meta visor también:

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