javascript - Jquery ajax 无限滚动排除页脚高度

Question

我正在研究 ajax 无限滚动。我有下面的代码在滚动结束后发出 ajax 请求，

$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height())){
    loadlist();
}
});

但它会在滚动到最后(包括页脚)时触发。但我希望在滚动时页脚刚开始显示时触发它(页脚高度为 300 像素)。

我研究并尝试了以下代码，

$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height()) - 300){ // 300px footer height
    loadlist();
}
});

但它看起来很脏。滚动时该函数被触发太多次。有什么好的解决方案吗？

Answer 1

我会采用在您的页脚元素首次滚动到 View 中时触发行为的方法。

var $footer = $("#my-footer");

$(window).scroll( function() {
    if (isScrolledIntoView($footer) ) loadList();
});

参见 Check if element is visible after scrolling获取 isScrolledIntoView() 的代码。