如何获得元素相对于浏览器视区的最高位置?

2022-08-30 00:40:54

我想获取元素相对于浏览器视口(显示页面的视口,而不是整个页面)的位置。如何在JavaScript中做到这一点?

非常感谢


答案 1

现有的答案现在已经过时了。本机方法已经存在了很长一段时间,并且完全符合问题的要求。此外,所有浏览器都支持它(似乎包括IE 5!getBoundingClientRect()

来自 MDN 页面

返回的值是一个 TextRectangle 对象,该对象包含只读的左、上、右和下属性,以像素为单位描述边框框,左上角相对于视区的左上角

你这样使用它:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;

答案 2

在我的情况下,为了安全滚动,我将window.scroll添加到等式中:

var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

这使我能够获得元素在文档上的真实相对位置,即使它已被滚动。