我试图用JavaScript检测浏览器滚动条的位置,以确定当前视图在页面中的位置。
我的猜测是,我必须检测拇指在轨道上的位置,然后是拇指的高度占轨道总高度的百分比。是我过于复杂了,还是JavaScript提供了一个更简单的解决方案?代码会是什么样子?
我试图用JavaScript检测浏览器滚动条的位置,以确定当前视图在页面中的位置。
我的猜测是,我必须检测拇指在轨道上的位置,然后是拇指的高度占轨道总高度的百分比。是我过于复杂了,还是JavaScript提供了一个更简单的解决方案?代码会是什么样子?
当前回答
我认为下面的函数可以帮助获得滚动坐标值:
const getScrollCoordinate = (el = window) => ({
x: el.pageXOffset || el.scrollLeft,
y: el.pageYOffset || el.scrollTop,
});
我从这个答案中得到了这个想法,只是做了一点改变。
其他回答
如果你关心整个页面,你可以使用这个:
document.body.getBoundingClientRect().top
document.getScroll = function() {
if (window.pageYOffset != undefined) {
return [pageXOffset, pageYOffset];
} else {
var sx, sy, d = document,
r = d.documentElement,
b = d.body;
sx = r.scrollLeft || b.scrollLeft || 0;
sy = r.scrollTop || b.scrollTop || 0;
return [sx, sy];
}
}
返回一个包含两个整数的数组- [scrollLeft, scrollTop]
如果你正在使用jQuery,这里有一个完美的函数:.scrollTop()
doc在这里-> http://api.jquery.com/scrollTop/
注意:你可以使用这个函数来检索或设置位置。
参见:http://api.jquery.com/?s=scroll
这是另一种获取滚动位置的方法:
const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
我这样做的Chrome上的<div>。
元素。scrollTop -由于滚动而隐藏在顶部的像素。如果没有滚动,它的值为0。
元素。scrollHeight -是整个div的像素。
元素。clientHeight -是你在浏览器中看到的像素。
var a = element.scrollTop;
将是位置。
var b = element.scrollHeight - element.clientHeight;
将是scrollTop的最大值。
var c = a / b;
将是滚动的百分比[从0到1]。