jQuery: Erkennung von unteren Ende des Scroll funktioniert nicht, erkennt nur die oberen

Question

Also im Grunde ist mein Problem ein scheinbar einfaches.

Sie können es in Aktion bei http://furnace.howcode.com sehen (bitte beachten Sie, dass Daten über Ajax zurückgegeben werden, wenn nichts passiert, geben Sie es ein paar Momente!).

Was passiert, ist MEANT, ist in der zweiten Spalte, wenn Sie den unteren Rand des Scrollens erreichen, werden die nächsten 5 Ergebnisse zurückgegeben.

Aber was tatsächlich passiert ist, dass es nur die 5 Ergebnisse zurückgibt, wenn Sie den TOP des Bildlaufbereichs treffen. Probieren Sie es aus: Scrollen Sie nach unten, nichts passiert. Scrollen Sie zurück nach oben, die Ergebnisse werden zurückgegeben.

Was läuft falsch?

Hier ist mein Code Ich verwende:

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

loadMore(); ist die Funktion, die Daten erhält und fügt es.

Also was läuft hier falsch? Danke für Ihre Hilfe!

Answer 1

Ihre Mathematik ist falsch, Sie sagen, wenn die Bildlaufleiste Position gleich der Höhe der Spalte minus der Höhe der Spalte (die gleich Null ist) laden mehr. Deshalb wird Ihr loadMore() an der Spitze Ihrer Spalte aufgerufen.

Versuchen:

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

Answer 2

Das hat für mich in der Vergangenheit zusammengearbeitet.

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

Hier ist eine gute explanation auch.

Answer 3

Die Lösung, die Jordanstephens veröffentlicht, ist auf dem richtigen Weg. Was Sie jedoch brauchen, ist nicht die Höhe von # col2, Sie brauchen die Höhe des Elternelements von # col2.

Beispiel:

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

Answer 4

Die folgende getestet wurde und funktioniert gut:

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

Answer 5

Vielleicht funktioniert das folgende:

1. HTML - wickeln, was im Inneren # col2 mit einem anderen DIV, sagen wir # col2-inner
2. CSS - setzen Sie eine feste Höhe ht und 'Überlauf: auto' nur für # col2

3. JS - siehe unten Plugin:

   $.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 am nächsten war, aber wenn Sie eine Grenze auf dem Element haben, dann müssen Sie Verwenden Sie .innerHeight() anstelle von .outerHeight(), da letzteres den Rahmen und .scrollTop() nicht enthält (.height() ist ebenfalls out, wenn Sie einen Padding haben). Außerdem würde ich zumindest ab jQuery 1.7.1 und vielleicht früher die Verwendung von .prop ('scrollHeight') empfehlen, anstatt sie direkt vom DOM abzurufen.Ich fand some talk, dass das DOM scrollHeight auf IE 5-8 gebrochen ist und die jQuery-Funktion abstrahiert das für mich, zumindest auf IE8.

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

Answer 7

Ich fand eine Alternative, die funktioniert.

Keiner dieser Antworten funktionierte für mich (derzeit Test in FireFox 22.0), und nach viel Forschung fand ich, was scheint, eine viel sauberere und unkomplizierte Lösung.

Implementiert Lösung:

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

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

Grüße

Answer 8

Ich weiß, diese Frage bereits gelöst, aber ein Problem bei der Verwendung von jQuery scrollTOp() Funktion auf anderes Element als auf $(window).scrollTop() oder $(document).scrollTop() seit einige Ausgabe wie

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

So können Sie

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

statt

$('your_selector').scrollTOp() 

verwenden, um die jQuery scrollTOp() Problem zu vermeiden.

Mein Vorschlag lautet wie folgt:

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