为什么浏览器检测到顶部为底部？

Question

我想在用户点击页面底部时加载更多图片。我发现了许多问题，解释了如何做到这一点，但我总是得到顶部而不是。

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        alert('bottom');
    }
});

此代码段应在达到底部时发出警报，但在达到顶部时会发出警报。这种情况发生在Chrome和Safari上。无法理解为什么？

Answer 1

更改为此if ((scrollHeight - scrollPosition) < 1)

＆＃13;

＆＃13;

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) < 1) {
      console.log('at bottom')
    }
});

＆＃13;

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

<div>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
  Loooong content<br>
</div>

＆＃13;

＆＃13;

＆＃13;