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

javascript dom-events scroll browser

2022-08-30 00:15:16

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

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

答案 1

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

答案 2

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

element.scrollTop - 由于滚动而隐藏在顶部的像素。如果没有滚动，其值为 0。

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

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

var a = element.scrollTop;

将是位置。

var b = element.scrollHeight - element.clientHeight;

将是 scrollTop 的最大值。

var c = a / b;

将是滚动的百分比 [从 0 到 1]。