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

Question

我需要翻译关于IT技术的内容。以下是需要翻译的内容:

我的无限滚动有问题。我希望在页面底部距离300像素之前执行加载更多功能。

我使用以下方法检测滚动：

$window.scroll(function(){

在这个函数中，我测试了以下内容：

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

但这只适用于当我们在页脚时。

然后我测试了这个：

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

但是无限滚动在页面的300像素和底部之间运行多次。

之后，我只想测试这个：

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

但是这个不起作用，我不理解。 你有什么想法吗？

非常感谢。

- Rémi Bonnet

Answer 1

检查的条件简单明了：

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

可能==或===不能正常工作，因为它们无法精确地满足相等条件。

编辑：根据请求在代码中添加了防止多次调用页面加载函数的代码。发生的事情很简单：解除事件绑定直到新内容被加载。一旦完成，事件将重新绑定。因此，您仍然可以使用>，而加载函数仅会被调用一次。我已经创建了一个简单的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>

- Iceman

---

出于性能的考虑，您必须首先创建var $window = $(window);和var $document = $(document);，并在您的scroll()中引用它。否则，jQuery将在每个滚动事件上创建两个新对象。 - spirit

@spirit 通常是这样的，比如选择元素内部，但由于document和window是两个根变量，我认为性能问题不会很大。请看一下这篇关于这个问题的SO帖子：https://dev59.com/0W7Xa4cB1Zd3GeqPpGCB 然而，我已经进行了编辑，以防我错了，并考虑到.scroll()创建了太多的事件。 - Iceman

谢谢您的帖子。实际上，我的想法不是关于性能，而是关于内存消耗=）。我认为，当我们在每个“滚动”事件上创建新对象时，我们最终会得到一个占用越来越多内存的浏览器标签页。所以我进行了一项测试，结果并不是这样=） - spirit

是的，但如果滚动条仅在300像素处，您没有解决方案吗？ - Rémi Bonnet

非常感谢，这个工作做得很好 :) 但是我在解除滚动绑定方面还有另一个问题。我能否仅针对此操作使用解除滚动绑定？因为我与另一个使用滚动事件的元素发生了冲突。 - Rémi Bonnet