有时getBoundingClientRect()对象的属性值在IE中显示为0。在这种情况下，你必须为元素设置display = 'block'。您可以使用下面的代码为所有浏览器获得偏移。

扩展jQuery功能:

(function($) {
    jQuery.fn.weOffset = function () {
        var de = document.documentElement;
        $(this).css("display", "block");
        var box = $(this).get(0).getBoundingClientRect();
        var top = box.top + window.pageYOffset - de.clientTop;
        var left = box.left + window.pageXOffset - de.clientLeft;
        return { top: top, left: left };
    };
}(jQuery));

使用:

var elementOffset = $("#" + elementId).weOffset();

本页上的函数将返回一个矩形，其中包含传递的元素相对于浏览器视图端口的上、左、高和宽坐标。

    localToGlobal: function( _el ) {
       var target = _el,
       target_width = target.offsetWidth,
       target_height = target.offsetHeight,
       target_left = target.offsetLeft,
       target_top = target.offsetTop,
       gleft = 0,
       gtop = 0,
       rect = {};

       var moonwalk = function( _parent ) {
        if (!!_parent) {
            gleft += _parent.offsetLeft;
            gtop += _parent.offsetTop;
            moonwalk( _parent.offsetParent );
        } else {
            return rect = {
            top: target.offsetTop + gtop,
            left: target.offsetLeft + gleft,
            bottom: (target.offsetTop + gtop) + target_height,
            right: (target.offsetLeft + gleft) + target_width
            };
        }
    };
        moonwalk( target.offsetParent );
        return rect;
}

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;
}

源

现有的答案现在已经过时了。原生的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;

编辑:添加一些代码来处理页面滚动。

function findPos(id) {
    var node = document.getElementById(id);     
    var curtop = 0;
    var curtopscroll = 0;
    if (node.offsetParent) {
        do {
            curtop += node.offsetTop;
            curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
        } while (node = node.offsetParent);

        alert(curtop - curtopscroll);
    }
}

id参数是你想要偏移量的元素的id。改编自一个奇怪的帖子。

谢谢你的回答。Prototype似乎已经有了这样一个函数(page()函数)。通过查看该函数的源代码，我发现它首先计算相对于页面的元素偏移位置(即文档顶部)，然后从中减去scrollTop。更多细节请参见原型的源代码。