根据目标位置触发无限滚动

Question

我试图在 window 滚动条底部到达目标 div 的位置时触发/允许加载一组新图像。

这里是滚动条到达页面底部时触发的公式，有轻微的偏移量 50，并且完美运行。

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

但是，如果我想使用目标的位置 div.infinite-scroll 需要什么计算/公式？我认为我可以用目标 div 的偏移量代替 50，但对我不起作用。

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

Answer 1

这似乎可以满足我的需要并且可以帮助其他人。如果您在计算中用目标容器代替 pageHeight，则当 window 滚动条到达目标位置而不是页面底部时，将触发无限滚动。

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

根据目标位置触发无限滚动

Trigger Infinite Scroll based on target position

jquery

containers

offset

infinite-scroll