javascript - 如何获取元素相对于浏览器视口(viewport)的顶部位置？

Question

我想获取元素相对于浏览器视口(viewport)(显示页面的视口(viewport)，而不是整个页面)的位置。这在 JavaScript 中如何实现？

非常感谢

Answer 1

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

来自 MDN page :

返回值是一个TextRectangle对象，其中包含描述边框的只读left、top、right和bottom属性，以像素为单位，其中左上角相对于左上角视口(viewport)的。

你这样使用它:

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