使用jQuery在屏幕上的元素的绝对位置答案

【问题标题】：Absolute position of an element on the screen using jQuery使用jQuery在屏幕上的元素的绝对位置
【发布时间】：2020-05-07 14:32:19
【问题描述】：

如何使用 jQuery 找出元素在当前可见屏幕（视口）上的绝对位置？

我有position:relative，所以 offset() 只会给出父级内的偏移量。

我有分层 div，所以$("#me").parent().offset() + $("#me").offset() 也无济于事。

我需要窗口中的位置，而不是文档，所以当文档滚动时，值应该会改变。

我知道我可以将所有父偏移量相加，但我想要一个更简洁的解决方案。

var top = $("#map").offset().top + 
    $("#map").parent().offset().top + 
    $("#map").parent().parent().offset().top +
    $("#map").parent().parent().parent().offset().top;

有什么想法吗？

更新： 我需要获取我的 div 顶部和文档顶部之间的确切像素间隙，包括填充/边距/偏移量？

我的代码：

HTML

<div id="map_frame" class="frame" hidden="hidden">
    <div id="map_wrapper">
        <div id="map"></div>
    </div>
</div>

CSS

#map_frame{
    border:1px solid #800008;
}

#map_wrapper {
    position:relative;
    left:2%;
    top:1%;
    width:95%;
    max-height:80%;
    display:block;
}

#map {
    position:relative;
    height:100%;
    width:100%;
    display:block;
    border:3px solid #fff;
}

jQuery 调整地图大小以填满屏幕*

var t = $("#map").offset().top + 
    $("#map").parent().offset().top + 
    $("#map").parent().parent().offset().top + 
    $("#map").parent().parent().parent().offset().top;

$("#map").height($(window).height() - t - ($(window).height() * 8 / 100));

谢谢...

【问题讨论】：

offset() 返回相对于文档的偏移量，无论您如何定位元素。一个元素相对于任何东西的位置在滚动时会如何变化？你确定你不只是在寻找scrollTop() 吗？
如果样式为position:relative，offset() 将返回父元素的偏移量。
当你滚动时，元素到屏幕顶部的距离会发生变化，对吧？
那个距离就是scrollTop，与元素位置无关，因为元素位于文档中，而窗口就是您在浏览器中看到的。不，当元素相对定位时，offset 仍然返回相对于文档的偏移量，试试看。请参阅下面的答案，它应该几乎涵盖了它。
也许看到这个解决方案：stackoverflow.com/questions/1567327/…

标签： javascript jquery html css

【解决方案1】：

在the jQuery doc 中查看.offset()。它给出了相对于文档的位置，而不是父级。您可能对.offset() 和.position() 感到困惑。如果您想要窗口中的位置而不是文档中的位置，您可以减去 .scrollTop() 和 .scrollLeft() 的值来计算滚动位置。

这是文档的摘录：

.offset() 方法允许我们检索当前位置相对于文档的元素。将此与 .position() 进行对比，它检索相对于偏移父级的当前位置。将新元素放置在现有元素之上以进行全局时操作（特别是，用于实现拖放）， .offset() 更有用。

组合这些：

var offset = $("selector").offset();
var posY = offset.top - $(window).scrollTop();
var posX = offset.left - $(window).scrollLeft();

您可以在这里尝试（滚动查看数字变化）：http://jsfiddle.net/jfriend00/hxRPQ/

【讨论】：

即使设置了 position:relative，为什么我会得到不同的值？ console.log($("#map").parent().parent().parent().offset().top); console.log($("#map").parent().parent().offset().top); console.log($("#map").parent().offset().top); console.log($("#map").offset().top);
@ATOzTOA - 我无法回答您的问题，因为您尚未披露围绕#map 的 HTML/CSS。父母并不总是与孩子有相同的偏移量（边距、填充、位置设置、其他孩子、浮动等......）。为什么要打扰父对象的.offset()？你不需要它。 .offset() 为您提供已考虑父偏移的目标对象的文档位置。
好的，那么如何获得我的#map div 顶部和文档顶部之间的确切像素间隙，包括填充/边距/偏移？
我将 offset() 设为 0，尽管我可以看到 div 顶部和文档顶部之间的间隙。
@ATOzTOA - 正如我之前所说，我们必须查看您的确切 HTML 和 CSS 才能知道在您的特定情况下发生了什么。 .offset() 按规定工作。它没有任何问题，所以你的特殊情况有一些你没有透露的特殊情况。可能有一个负滚动或文档周围可能有一个容器（例如 iframe）。我真的不知道你的 HTML/CSS 中有什么。抱歉，但我已经根据您告诉我们的内容构建了一个完整的工作演示，以向您展示它是如何工作的。不能用你给我们的东西做更多的事情。

【解决方案2】：

对于我编写此函数的任何 jquery 元素的绝对坐标，它可能不适用于所有 css 位置类型，但对于某人来说可能是一个好的开始..

function AbsoluteCoordinates($element) {
    var sTop = $(window).scrollTop();
    var sLeft = $(window).scrollLeft();
    var w = $element.width();
    var h = $element.height();
    var offset = $element.offset(); 
    var $p = $element;
    while(typeof $p == 'object') {
        var pOffset = $p.parent().offset();
        if(typeof pOffset == 'undefined') break;
        offset.left = offset.left + (pOffset.left);
        offset.top = offset.top + (pOffset.top);
        $p = $p.parent();
    }

    var pos = {
          left: offset.left + sLeft,
          right: offset.left + w + sLeft,
          top:  offset.top + sTop,
          bottom: offset.top + h + sTop,
    }
    pos.tl = { x: pos.left, y: pos.top };
    pos.tr = { x: pos.right, y: pos.top };
    pos.bl = { x: pos.left, y: pos.bottom };
    pos.br = { x: pos.right, y: pos.bottom };
    //console.log( 'left: ' + pos.left + ' - right: ' + pos.right +' - top: ' + pos.top +' - bottom: ' + pos.bottom  );
    return pos;
}

【讨论】：

【解决方案3】：

顺便说一句，如果有人想在没有 jQuery 的情况下获取屏幕上元素的坐标，请试试这个：

function getOffsetTop (el) {
    if (el.offsetParent) return el.offsetTop + getOffsetTop(el.offsetParent)
    return el.offsetTop || 0
}
function getOffsetLeft (el) {
    if (el.offsetParent) return el.offsetLeft + getOffsetLeft(el.offsetParent)
    return el.offsetleft || 0
}
function coordinates(el) {
    var y1 = getOffsetTop(el) - window.scrollY;
    var x1 = getOffsetLeft(el) - window.scrollX; 
    var y2 = y1 + el.offsetHeight;
    var x2 = x1 + el.offsetWidth;
    return {
        x1: x1, x2: x2, y1: y1, y2: y2
    }
}

【讨论】：