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

【问题标题】：Trigger Infinite Scroll based on target position根据目标位置触发无限滚动
【发布时间】：2017-06-05 05:14:34
【问题描述】：

当窗口滚动条的底部到达目标 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;

【问题讨论】：

标签： jquery containers offset infinite-scroll

【解决方案1】：

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

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

【讨论】：