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

非常感谢


当前回答

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

其他回答

现有的答案现在已经过时了。原生的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。改编自一个奇怪的帖子。

我假设在web页面中存在一个id为btn1的元素,并且包含jQuery。这适用于所有现代浏览器的Chrome, FireFox, IE >=9和Edge。 jQuery只是用来确定相对于文档的位置。

var screenRelativeTop =  $("#btn1").offset().top - (window.scrollY || 
                                            window.pageYOffset || document.body.scrollTop);

var screenRelativeLeft =  $("#btn1").offset().left - (window.scrollX ||
                                           window.pageXOffset || document.body.scrollLeft);

有时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();

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