$(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
}

Answer 1

这是因为$(window).scrollTop()返回页面顶部的位置，$(document).height()返回页面底部的位置。因此，您需要减去窗口的高度，以获得要与之比较的位置，因为如果您完全滚动到底部，就会得到页面顶部的位置。

Answer 2

$(window).scrollTop()是窗口顶部相对于文档的位置。在我现在看到的页面上，如果我滚动到最底层，那就是1385。$(document).height()是整个页面的高度(1991代表我)。$( window ).height()是窗口(viewport)的高度(606 )。这意味着视口顶部的位置加上窗口的高度是视口底部的位置。1385 + 606 = 1991。

Answer 3

scrollTop值永远不会像文档高度值那样高。这意味着您将滚动通过文档，使其全部位于窗口之外。

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

当窗口的底部位于文档的底部时，从文档高度中减去窗口高度将给出scrollTop的值。