有时,我们需要检测是否已向下滚动到窗口底部。
例如,假设您正在创建一个延迟加载功能,在该功能中,您需要检查是否已达到滚动限制才能获取其他数据。
检测窗口是否滚动到底部。
浏览器的窗口和文档属性为我们提供了三种不同的东西,我们将使用它们来检测滚动端。
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;