if($(window).scrollTop()== $(document).height() - $(window).height() - 300)为什么这不起作用？

Question

我的无限卷轴有问题.我希望在页面底部的300px之前执行更多的加载.

我检测到滚动:

$window.scroll(function(){

在这个函数中我测试了这个:

if (($document.height() - $window.height()) == $window.scrollTop()) {

但这只适用于我们的页脚.

然后我测试一下:

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 300)

但无限滚动在300px和页面底部之间运行几次.

在此之后,我想测试一下:

if ($(window).scrollTop() == $(document).height() - $(window).height() - 300)

但这不起作用,我不明白.你有想法吗？

非常感谢

Answer 1

要检查的条件很简单:

if($(window).scrollTop() + $(window).height() > $(document).height() - 300){}

可能==或===可能不起作用,因为它不会完全等于条件.

编辑: 根据要求我添加了代码以防止多次调用页面加载功能.在加载新内容之前,会发生什么事情是对事件进行简单的解除绑定.一旦完成,事件将再次被绑定.因此,您可以使用>并且仍然只调用一次load函数.我创建了一个简单setTimeout的模拟代码中来自ajax请求的延迟.

---链接到FIDDLE ---

看看这个简单的工作演示:

var winCached = $(window),
  docCached = $(document)

var currLeng = 0;

function addContent() {
  dettachScrollEvent();
  setTimeout(function() { //this timeout simulates the delay from the ajax post
    for (var i = currLeng; i < currLeng + 100; i++)
      $('div').append(i + '<br />');
    currLeng = i;
    console.log("called loader!");
    attachScrollEvent();
  }, 500);

}

function infiNLoader() {
  if (winCached.scrollTop() + winCached.height() > docCached.height() - 300) {
    addContent();
    //alert("near bottom! Adding more dummy content for infinite scrolling");
  }
}

function attachScrollEvent() {

  winCached.scroll(infiNLoader);
}

function dettachScrollEvent() {
  winCached.unbind('scroll', infiNLoader);
}
addContent();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>