Question

我正在尝试在滚动加载上实现。

这是我滚动的代码

$(window).on("scroll", function(){
    if( ($(window).scrollTop()-350) + $(window).height() == $(document).height()){

        loaddata();
    }
});

我从scrollTop中减去350，因为我希望在某个div上触发AJAX请求进入视口。

为什么此代码无效。

这里loaddata是一个有AJAX请求的函数。

但是，当我运行此代码时，它可以工作：

$(window).on("scroll", function(){
    if($(window).scrollTop() + $(window).height() == $(document).height()){

        loaddata();
    }
});

但是，我必须到页面的末尾才能触发AJAX请求。

为什么那段代码在我从scrollTop中减去350的地方不起作用？当我到达某个div时，我需要触发AJAX，我该怎么办？

Answer 1

这里有两个不同的问题;一个是你正在测试精确的滚动位置，另一个是你想要将350px添加到滚动位置而不是减去它（因此该函数将在窗口结束之前触发350px，而不是350px之后结束了。）

试试这个：

if( $(window).scrollTop() + $(window).height() + 350 >= $(document).height()) {
    loaddata();
}

但请记住滚动事件不断发生，你可能只想要loaddata()一次！因此：

var loadedData = false;
$(window).on("scroll", function() {
  if (loadedData) return;
  if ($(window).scrollTop() + $(window).height() + 350 >= $(document).height()) {
    alert("Fire loaddata now");
    loadedData = true;
    loaddata();
  }
});

...如果需要，让你的loaddata()函数将loadedData设置为false以重新启用滚动触发器。

http://plnkr.co/edit/4QeGuRIdRQ6NchFvUiNt

当我到达某个div

1 个答案: