Trigger Infinite Scroll basierend auf der Zielposition

Question

Ich versuche, eine neue Gruppe von Bildern auszulösen/zulassen, wenn der untere Teil der Fensterlaufleiste die Position eines Ziel-Div erreicht hat.

Hier ist die Formel für die Auslösung, wenn die Bildlaufleiste den unteren Rand der Seite mit einem leichten Offset erreicht, 50, und funktioniert einwandfrei.

$(window).scroll(function() { 
    // Page height 
    var pageHeight = $(document).height(); 
    // Window height 
    var winH = $(window).height(); 
    // Scrollbar position 
    var scrollPos = $(this).scrollTop(); 
    // Formula 
    var dist = pageHeight - (scrollPos + winH); 
    // When to load new images with a slight offset 
    var load = dist < 50; 
    if (load) { 
     addItems(); 
    } 
}); 

Aber statt, wenn ich div.infinite-scroll die Position eines Ziels verwenden möchten, was die Berechnung/Formel benötigt? Ich dachte, dass ich den Offset des Ziel-Div anstelle von 50 ersetzen könnte, aber nicht für mich funktioniert.

var targetPos = $(Infinite_Scroll.container).offset().top; 
var load = dist < targetPos; 

Answer 1

Dies scheint für meine Bedürfnisse zu arbeiten und könnte anderen helfen. Wenn Sie den Zielcontainer für die pageHeight in der Berechnung ersetzen, wird Infinite Scroll ausgelöst, wenn die Fensterlaufleiste die Position des Ziels anstelle des unteren Seitenrands erreicht.

// Before 
var dist = pageHeight - (scrollPos + winH); 
// Change 
var dist = $(Infinite_Scroll.container).offset().top - (scrollPos + winH); 

$(window).scroll(function() { 
    // Page height 
    var pageHeight = $(document).height(); 
    // Window height 
    var winH = $(window).height(); 
    // Scrollbar position 
    var scrollPos = $(this).scrollTop(); 
    // Formula 
    var dist = $(Infinite_Scroll.container).offset().top - (scrollPos + winH); 
    // When to load new images with a slight offset 
    var load = dist < 50; 
    if (load) { 
     addItems(); 
    } 
});