javascript - 当我到达某个 div 时，scrollTop 不起作用

Question

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

这是我的滚动代码

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

        loaddata();
    }
});

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

为什么这段代码不起作用。

这里的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() 函数将 returnedData 设置回 false，以在必要时重新启用滚动触发器。

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