为什么文档高度等于窗口内部高度+ pageYoffset？

Question

我正在尝试检测用户何时滚动到页面的最底部。

我最终得到的解决方案如下

var windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
var body = document.body, html = document.documentElement;
var docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,  html.scrollHeight, html.offsetHeight);
var windowBottom = windowHeight + window.pageYOffset;

if (windowBottom >= docHeight) {
    // Bottom is reached
}

我很困惑为什么会这样做

从文档中，innerheight是视图门户的高度，pageYoffset是我们制作的滚动量。

因此，为了检测滚动到底部，我不应该检查是否pageYOffset >= documentHeight？

为什么我必须添加innerheight？

Answer 1

这与Angular无关。这就是所有浏览器的工作方式。

您的pageYOffset永远不会超过文档高度，因为它代表视口的顶部。为了使pageYOffset等于文档高度，您必须滚过页面末尾。

最大pageYOffset可以是docHeight - window.innerHeight。所以你的支票可能是：

if (pageYOffset >= docHeight - window.innerHeight) {
    // Bottom is reached
}