如何使用 JavaScript 获取滚动条位置？

Question

我正在尝试使用 JavaScript 检测浏览器滚动条的位置，以确定当前视图在页面中的位置。

我的猜测是，我必须检测轨道上拇指的位置，然后检测拇指的高度占轨道总高度的百分比。我是否过于复杂了，还是 JavaScript 提供了比这更简单的解决方案？一些代码会是什么样子？

原文由 Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 element.scrollTop 和 element.scrollLeft 分别获取已滚动的垂直和水平偏移量。如果您关心整个页面， element 可以是 document.body 。如果需要百分比，可以将其与 element.offsetHeight 和 element.offsetWidth （同样， element 可能是主体）进行比较。

原文由 Max Shawabkeh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在 Chrome 上为 <div> 做了这个。

元素 .scrollTop - 是由于滚动而隐藏在顶部的像素。没有滚动，它的值为 0。

element .scrollHeight - 是整个 div 的像素。

元素 .clientHeight - 是您在浏览器中看到的像素。

 var a = element.scrollTop;

将是位置。

 var b = element.scrollHeight - element.clientHeight;

将是 scrollTop 的 最大值。

 var c = a / b;

将是滚动的百分比 [from 0 to 1] 。

原文由 Gatsby 发布，翻译遵循 CC BY-SA 3.0 许可协议