如何获得元素相对于浏览器视区的最高位置?
2022-08-30 00:40:54
我想获取元素相对于浏览器视口(显示页面的视口,而不是整个页面)的位置。如何在JavaScript中做到这一点?
非常感谢
我想获取元素相对于浏览器视口(显示页面的视口,而不是整个页面)的位置。如何在JavaScript中做到这一点?
非常感谢
现有的答案现在已经过时了。本机方法已经存在了很长一段时间,并且完全符合问题的要求。此外,所有浏览器都支持它(似乎包括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;
在我的情况下,为了安全滚动,我将window.scroll添加到等式中:
var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;
这使我能够获得元素在文档上的真实相对位置,即使它已被滚动。