JQuery Detect Scroll at Bottom

Question

Deseo lograr la carga de contenido cuando el usuario se desplaza al final de la página.

Tengo un problema. Funciona bien en los navegadores de escritorio pero no en los dispositivos móviles. Implementé una solución sucia para que funcione en el iPhone, pero no es óptima, ya que no funcionará en otros dispositivos móviles de distintos tamaños.

Mi página web es www.cristianrgreco.com, desplazarse hacia abajo para ver el efecto en la acción

El problema es añadir el rollo y la altura no es igual a la altura en los dispositivos móviles, mientras que lo hacen en los navegadores de escritorio.

¿Hay alguna manera de detectar navegadores móviles?

Gracias de antemano.

A continuación se está utilizando actualmente el código:

$(document).ready(function() { 
     $(".main").hide().filter(":lt(3)").show(); 
     if ($(document).height() == $(window).height()) { 
      // Populate screen with content 
     } 
     else if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { 
      window.onscroll = function() { 
       if ($(document).height() - $(window).scrollTop() <= 1278) { 
        // At the moment only works on iPhone 
       } 
      } 
     } 
     else { 
      $(window).scroll(function() { 
       if ($(window).scrollTop() + $(window).height() >= $(document).height()) {      
        // Works perfect for desktop browsers 
       } 
      }) 
     } 
}) 

Answer 1

Para cualquier persona que se ve aquí más tarde, he resuelto esto añadiendo height=device-height a la etiqueta meta ventana gráfica:

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

Puede luego continúe usando $(document).scroll(function(){});

Esto funcionó con iOS 5

Answer 2

¿Ha añadido la etiqueta meta para los iphones, que establece el tamaño de contenido a la vista del teléfono?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

EDIT:

Así que intentó esto en mi teléfono (androide, pan de jengibre) y el problema no era tanto el código no funciona, se visualiza el contenido no obliga a la página para desplazarse. Tan pronto como amplié y bajé un poco más contenido cargado dinámicamente. Puede intentar agregar contenido hasta que el contenido agregado sea mayor que $ (ventana) .height();

Answer 3

bala modo a prueba para obtener altura del documento en todos los navegadores:

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

Answer 4

también se puede utilizar un plugin de desplazamiento sin fin: https://github.com/fredwu/jquery-endless-scroll https://github.com/paulirish/infinite-scroll

estoy usando el rollo sin fin y funciona muy bien en mi portátil y iPhone

Answer 5

Si puedes, realmente deberías evitar tratar de acertar un número exacto.

Usando la función de Stelok anterior, se puede probar de esta manera:

if ($win.height() + $win.scrollTop() > (getDocumentHeight()-10)) { 

que es un poco más suave - el usuario puede no haber bastante desplazado a la exacta último píxel, pero piensa que él/ella está en la parte inferior.

Answer 6

Aquí hay un agregado de las otras respuestas que me funciona muy bien. Podría escribirse como un complemento jQuery en algún momento.

// Handles scrolling past the window up or down to refresh or load more data. 
var scrolledPastTop = false; 
var scrolledPastBottom = false; 
var scrollPrevious = 0; 

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

function bottomScrollRefresh(callback) { 
    var pastBottom = $window.height() + $window.scrollTop() > getDocumentHeight(); 
    if(!scrolledPastBottom && pastBottom) { 
    callback($window.height() + $window.scrollTop()); 
    scrolledPastBottom = true; 
    } else { 
    if(!pastBottom) scrolledPastBottom = false; 
    } 
    scrollPrevious = $window.scrollTop(); 
} 

function topScrollRefresh(callback) { 
    var pastTop = $window.scrollTop() < scrollPrevious && $window.scrollTop() <= 0; 
    if(!scrolledPastTop && pastTop) { 
    callback($window.scrollTop()); 
    scrolledPastTop = true; 
    } else { 
    if(!pastTop) scrolledPastTop = false; 
    } 
    scrollPrevious = $window.scrollTop(); 
} 

usar esto en su código, añadir algo como esto:

window.onscroll = function() { 
    topScrollRefresh(function(pos) { 
     console.log("Loading top. " + pos); 
    }); 
    bottomScrollRefresh(function(pos) { 
    console.log("Loading bottom. " + pos); 
    }); 
}; 

funciona muy bien para mi PhoneGap/Cordova aplicación.

Answer 7

Una versión mejorada de jQuery del código

var scrollRefresh = { 
    pastTop: false, 
    pastBottom: false, 
    previous: 0, 
    bottom: function(callback) { 
     var pBottom = $(window).height() + $(window).scrollTop() >= $(document).height(); 
     if(!this.pastBottom && pBottom) { 
     callback($(window).height() + $(window).scrollTop()); 
     this.pastBottom = true; 
     } else { 
     if(!pBottom) this.pastBottom = false; 
     } 
     this.previous = $(window).scrollTop(); 
    }, 
    top: function(callback) { 
     var pTop = $(window).scrollTop() < this.scrollPrevious && $(window).scrollTop <= 0; 
     if(!this.pastTop && pTop) { 
     callback($(window).scrollTop()); 
     this.pastTop = true; 
     } else { 
     if(!pTop) this.pastTop = false; 
     } 
     this.previous = $(window).scrollTop(); 
    } 
    } 

    $(window).scroll(function() { 
    scrollRefresh.top(function(pos) { 
     console.log("Loading top. " + pos); 
     alert("scrolled to top"); //You should delete this line 
    }); 
    scrollRefresh.bottom(function(pos) { 
     console.log("Loading bottom. " + pos); 
     alert("scrolled to bottom"); //You should delete this line 
    }); 
    }); 

Answer 8

Esto es lo que funcionó para mí:

(window.innerHeight + window.scrollY) == $(document).height() 

encontrar aquí: Javascript: How to detect if browser window is scrolled to bottom?

Answer 9

usando jQuery y Strelok de getDocumentHeight() a continuación (¡Salud!) Encontré que lo siguiente funcionó bastante bien. Las pruebas para la igualdad no funcionó para mí como el iPhone sólo se registró un valor de desplazamiento al final de la diapositiva que en realidad era mayor que la altura del documento:

$(window).scroll(function() { 
    var docHeight = getDocumentHeight();   
    if ($(window).scrollTop() + $(window).height() >= docHeight) { 
    // Do stuff 
    } 
}); 

Answer 10

Aunque la pregunta se hizo hace 5 años, todavía es más que relevante en el contexto actual de UI/UX. Y me gustaría agregar mis dos centavos.

var element = document.getElementById('flux'); 
if (element.scrollHeight - element.scrollTop === element.clientHeight) 
{ 
    // element is at the end of its scroll, load more content 
} 

Fuente: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled