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请求的延迟。

<强> ---LINK TO 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>

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

1 个答案: