2017-06-05 66 views
1

我試圖觸發/允許當窗口滾動條的底部已經達到了目標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的位置?我認爲我可以用50代替目標div的偏移量,但對我沒有任何作用。

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

回答

0

這似乎符合我的需求,可以幫助他人。如果在計算中將目標容器替換爲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(); 
    } 
});