获取滚动位置的正确方法

Question

在我的应用程序中，我想确定当前的滚动位置，因此我一直在使用它来执行此操作（来源：https://www.codegrepper.com/code-examples/javascript/get+current+scroll+position +javascript)

window.pageYOffset || document.documentElement.scrollTop 

问题：当我console.log这个时，当页面未定位且位于顶部时，它仅返回0。

问题：是否有其他方法来获取当前滚动位置？

Answer 1

尝试

window.scrollY

。

Window接口的只读scrollY属性返回 文档当前垂直滚动的像素数。

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY

Answer 2

最近我也遇到了同样的问题。因此，为了获得百分比位置，我最终执行以下操作

window.addEventListener("scroll", function() {

    const maxHeight = document.body.scrollHeight - window.innerHeight;
    console.log((window.pageYOffset * 100) / maxHeight);
});

我们从

window.innerHeight

中减去

document.body.scrollHeight

，因为

window.pageYOffset

代表视口的顶部。因此，为了使

window.pageYOffset

匹配

document.body.scrollHeight

，我们进行上述减法。

PS.：上面返回的是浮点数。如果您愿意，可以使用

parseInt(...)

将其转换为整数。

Answer 3

使用

const maxHeight = document.documentElement.scrollHeight - window.innerHeight;

在现代 Web 开发中，当您想要访问文档的总可滚动高度时，建议使用

document.documentElement.scrollHeight

属性而不是

document.body.scrollHeight

，因为前者更可靠并且跨浏览器一致地工作。