JavaScript检测窗口是否滚动到底部

有时，我们需要检测是否已向下滚动到窗口底部。

例如，假设您正在创建一个延迟加载功能，在该功能中，您需要检查是否已达到滚动限制才能获取其他数据。

检测窗口是否滚动到底部。

浏览器的窗口和文档属性为我们提供了三种不同的东西，我们将使用它们来检测滚动端。

const scrollEnd = (window.innerHeight + window.scrollY) >= document.body.offsetHeight;

innerHeight给出放置数据的窗口的可用高度，并提供滚动位置。scrollY

我们将它们组合在一起，通过将其与 进行比较来检查我们是否已经到达了身体的末端。document.body.offsetHeight

这可以正常工作，但该属性在 IE 浏览器中不可用。scrollY

因此，以下是我们可以使用的解决方法。

const scrollEnd = (window.innerHeight + window.pageYOffset) >= document.body.offsetHeight;

pageYOffset

为我们提供了当前文档的像素已从窗口左上角水平滚动。

MAC 中的滚动位置。

这在除MAC之外的所有浏览器中都能完美运行。在mac中，我们需要从计算中减少几个像素。

const scrollEnd = (window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2;

如果您想检查特定元素，那么我们执行以下操作。

  const d = document.documentElement;
  const offset = d.scrollTop + window.innerHeight;
  const height = d.offsetHeight;
  const scrollEnd = offset >= height;