$(window).scrollTop() == $(document).height() - $(window).height() 的含义是什么？

Question

以下代码用于检测用户是否滚动到页面底部，并且它可以正常工作。

if($(window).scrollTop() == $(document).height() - $(window).height()){
//do something
}

问题：

我不明白为什么要从窗口的高度中减去文档的高度，然后将其与滚动高度进行比较，以确定页面底部是否已到达。为什么不简单地使用

if($(window).scrollTop() == $(document).height()){
//do something
}

或者

if($(window).scrollTop() ==  $(window).height()){
//do something
}

- Usman Mutawakil

Answer 1

这是因为$(window).scrollTop()返回页面顶部的位置，$(document).height()返回页面底部的位置。因此，您需要减去窗口的高度才能获得要比较的位置，因为这将给出您在完全滚动到底部时顶部所在的位置。

- CodePB

---

那么我该如何将它从窗口更改为特定的 div 呢？用 ('#scrollbar') 替换 (window)？你能告诉我正确的语法吗？谢谢 :) - James Smith

我相信以下是正确的，但你可能需要检查跨浏览器兼容性，因为我只在Chrome中进行了测试：http://jsfiddle.net/e1uxn46k/。基本上，你需要做类似的事情，但要将div的scrollheight与scrolltop + innerheight进行比较。 - CodePB

对我没用。滚动到底部：[$(document).height(), $(window).height(), $(window).scrollTop()]是[408, 408, 64]。当我滚动到顶部时[408, 408, 0]：这是当相等条件满足并且新内容被附加时。奇怪！我希望在滚动到底部时附加。 - coder.in.me

我只是想提醒一下，如果对其他人有所帮助的话。此代码将在100％浏览器缩放下工作，但不一定会在其他缩放级别下工作。请参阅此处的讨论以获取更多信息：https://dev59.com/amncs4cB2Jgan1zn_eh_ - Milo

Answer 2

$(window).scrollTop()是窗口相对于文档顶部的位置。在我现在浏览的页面上，当我滚到最底部时，它是1385。 $(document).height() 是整个页面的高度（对我来说是1991）。 $(window).height() 是窗口（视口）的高度（对我来说是606）。这意味着视口顶部的位置加上窗口的高度就是视口底部的位置。1385 + 606 = 1991。

- Explosion Pills

Answer 3

scrollTop 的值永远不会高于文档高度值。这意味着您向下滚动超过了窗口之外的整个文档。

将 scrollTop 与窗口高度进行比较只意味着您向下滚动了一个屏幕，而不是滚动到文档底部。

从文档高度中减去窗口高度，可以得到当窗口底部位于文档底部时，scrollTop 的值。

- Guffa