Question

我正在尝试触发/允许在窗口滚动条的底部到达目标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，那么当窗口滚动条到达目标位置而不是页面底部时，将触发无限滚动。

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

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

1 个答案: