var element =  document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

function inViewport(element) {
    let bounds = element.getBoundingClientRect();
    let viewWidth = document.documentElement.clientWidth;
    let viewHeight = document.documentElement.clientHeight;

    if (bounds['left'] < 0) return false;
    if (bounds['top'] < 0) return false;
    if (bounds['right'] > viewWidth) return false;
    if (bounds['bottom'] > viewHeight) return false;

    return true;
}

源

在我的例子中，为了安全起见，我添加了窗口。滚动到方程式:

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

这允许我获得文档上元素的真实相对位置，即使它已经被滚动。

jQuery非常优雅地实现了这一点。如果你查看jQuery的偏移量的源代码，你会发现它基本上是这样实现的:

var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};

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

来自MDN页面:

返回值是一个TextRectangle对象，它包含以像素为单位的描述边界框的只读左、上、右和下属性，其中左上角相对于viewport的左上角。

你可以这样使用它:

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

这里有一些关于Angular2 +的东西。在版本13上测试

event.srcElement.getBoundingClientRect().top;