jQuery: la detección de llegar al final del desplazamiento no funciona, solo detecta la parte superior

Question

Así que básicamente mi problema es aparentemente simple.

Puede verlo en acción en http://furnace.howcode.com (tenga en cuenta que los datos se devuelven a través de Ajax, por lo que si no ocurre nada, denle unos minutos).

Lo que QUIERE suceder, es en la segunda columna cuando se llega al final de desplazamiento, se devuelven los siguientes 5 resultados.

Pero lo que realmente sucede es que solo devuelve los 5 resultados cuando se golpea la parte superior del área de desplazamiento. Pruébalo: desplázate hacia abajo, no pasa nada. Desplácese hacia atrás hasta la parte superior, se devuelven los resultados.

¿Qué está pasando?

Aquí está mi código que estoy usando:

$('#col2').scroll(function(){ 
    if ($('#col2').scrollTop() == $('#col2').height() - $('#col2').height()){ 
     loadMore(); 
    } 
}); 

loadMore(); es la función que obtiene los datos y lo anexa.

¿Qué está mal aquí? ¡Gracias por tu ayuda!

Answer 1

Su cálculo es incorrecto, su decir si la posición de la barra de desplazamiento es igual a la altura de la columna menos la altura de la columna (que es igual a cero) cargar más. es por eso que se llama a su loadMore() en la parte superior de su columna.

Probar:

$('#col2').scroll(function(){ 
    if ($('#col2').scrollTop() == $('#col2').height()){ 
     loadMore(); 
    } 
}); 

Answer 2

Esto ha funcionado para mí en el pasado.

var col = $('#col2'); 
col.scroll(function(){ 
    if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop())) 
     loadMore(); 
}); 

Aquí hay una buena explanation también.

Answer 3

La solución que jordanstephens publicó está en el camino correcto. Sin embargo, lo que necesita no es la altura de # col2, necesita la altura del elemento padre de # col2.

Ejemplo:

$('#col2').scroll(function(){ 
    if ($('#col2').scrollTop() == $('#col2').parent().height()) { 
    loadMore(); 
    } 
} 

Answer 4

El siguiente ha sido probado y funciona bien:

$(window).scroll(function() { 
    if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
    loadMore(); 
    } 
}); 

Answer 5

Tal vez el siguiente trabajo:

1. HTML - envoltura de lo que hay dentro # col2 con otro DIV, digamos # col2-inner
2. CSS - configure un heig fijo HT y 'overflow: auto' sólo para # col2

3. JS - ver plug-in a continuación:

   $.fn.scrollPaging = function (handler) { 
       return this.each(function() { 
        var $this = $(this), 
         $inner = $this.children().first(); 
   
        $this.scroll(function (event) { 
         var scrollBottom = $this.scrollTop() + $this.height(), 
          totalScroll = $inner.height(); 
   
         if (scrollBottom >= totalScroll) { 
          handler(); 
         } 
        }); 
   
       }); 
   }; 
   
   $('#col2').scrollPaging(loadMore); 
   

Answer 6

@munch estaba más cerca, pero si usted tiene un borde en el elemento, entonces usted necesita use .innerHeight() en lugar de .outerHeight() ya que este último incluye el borde y .scrollTop() no (.height() también está fuera si tiene relleno). Además, al menos a partir de jQuery 1.7.1 y quizás antes, recomendaría usar .prop ('scrollHeight') en lugar de recuperarlo directamente del DOM.Encontré some talk que DOM scrollHeight está roto en IE 5-8 y la función jQuery lo resume para mí, al menos en IE8.

var $col = $('#col2'); 
$col.scroll(function(){ 
if ($col.innerHeight() == $col.prop('scrollHeight') - $col.scrollTop()) 
    loadMore(); 
}); 

Answer 7

He encontrado una alternativa que funciona.

Ninguna de estas respuestas funcionó para mí (actualmente está probando en FireFox 22.0), y después de mucha investigación encontré, lo que parece ser, una solución mucho más limpia y directa.

solución implementada:

function IsScrollbarAtBottom() { 
    var documentHeight = $(document).height(); 
    var scrollDifference = $(window).height() + $(window).scrollTop(); 
    return (documentHeight == scrollDifference); 
} 

de recursos: http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html

Saludos

Answer 8

Sé que esta pregunta ya está resuelto, pero una preocupación cuando se utiliza jQuery función scrollTOp() el elemento distinto en $(window).scrollTop() o $(document).scrollTop() desde algún problema como

jQuery: detecting reaching bottom of scroll doesn't work, only detects the top

Explain why scrollTop() always returns 0 here

$(document).scrollTop() always returns 0

esta manera puede utilizar

$(window).scrollTop() - $('your_selector').offset().top 

en lugar de

$('your_selector').scrollTOp() 

para evitar el problema de jQuery scrollTOp().

Mi sugerencia es la siguiente:

$(window).scroll(function() { 
     var $more = $('#col2'); 
     var top = $(window).scrollTop() - $more.offset().top; 
     if(top + $more.innerHeight() >= $more[0].scrollHeight) { 
      loadMore(); 
     } 
    });