Javascript获取元素相对于屏幕左上角的位置[重复]答案

【问题标题】：Javascript get an Element's position relative to the screen's top left corner [duplicate]Javascript获取元素相对于屏幕左上角的位置[重复]
【发布时间】：2016-06-04 04:58:28
【问题描述】：

请注意，jQuery position 函数和 Javascript 的 getBoundingClientRect 都不能满足我的要求。

我正在尝试获取元素相对于用户屏幕左上角坐标的位置。

我主要是想为谷歌浏览器解决这个问题。我将不胜感激任何可以引导我走上正确道路的答案。

【问题讨论】：

标签： javascript jquery google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

使用jQuery.offset()函数，可以得到浏览器页面左上角的坐标：

var offset = $("selector").offset();

结合 Javascript window.screenX and window.screenY 窗口属性，您可以将元素的位置计算为与屏幕顶部/左侧的偏移量：

var screenY = offset.top + window.screenX;
var screenX = offset.left + window.screenY;

请注意，window.screenX 和 window.screenY 在大多数 浏览器中是标准的，但 IE 版本 8 及之前的版本使用 window.screenTop 和 window.screenLeft 代替。如果您需要兼容 IE8 或更早版本，请务必考虑到这一点。

另请注意，您可能需要考虑当前滚动位置，在这种情况下，您将使用 jQuery .scrollTop() 和 .scrollLeft() 方法并从偏移值中减去。

不幸的是，这不会考虑窗口边框或工具栏。为此，您可以捕获鼠标移动并存储鼠标位置，该位置以实际屏幕坐标给出。

这个解决方案的核心如下，它安装了一个一次性鼠标处理程序来确定页面的实际屏幕坐标：

var pageX;
var pageY;

window.onmousemove = setMouseCoordinates;

function setMouseCoordinates (e) {
    window.onmousemove = null;

    pageX = e.screenX - e.clientX;
    pageY = e.screenY - e.clientY;
}

然后，您可以使用这些存储的值来计算任何 Javascript 元素的偏移量：

x = pageX + elem.offsetLeft;
y = pageY + elem.offsetTop;

或 jQuery 元素：

x = pageX + elem.position().left;
y = pageY + elem.position().top;

查看小提琴以查看它的实际效果：https://jsfiddle.net/mgaskill/bpqzct3f/

【讨论】：

这会考虑浏览器地址栏和书签栏吗？我现在要试一试。也可以在不使用 jQuerys 偏移函数和原生 JS 调用的情况下获得偏移量吗？
@KerxPhilo 我相信所有现代浏览器都会考虑地址栏、书签栏和任何安装的自定义工具栏。它应该为您提供像素正确的位置。关于原生 Javascript 调用，并不是那么简单——finding element's position relative to the document 的答案显示了需要做什么。我会在这个上坚持使用 jQuery，但这只是我。 :D
迈克尔，不幸的是，这不起作用。似乎 window.screenX 提供了浏览器窗口在屏幕上的位置信息，而 offset.top 提供了主体的位置。它不考虑浏览器的地址栏、谷歌浏览器标签占用的空间等......
@KerxPhilo 我很抱歉，我的浏览器边框上的记忆不正确。我已经用一个可以获取屏幕坐标的工作示例以及一个显示它工作的 jsFiddle 更新了我的答案。除此之外，没有办法获得元素的真实屏幕坐标。我希望这对您有所帮助。

【解决方案2】：

我认为 HTMLElement.offSetLeft 和 HTMLElement.offSetTop 是您正在寻找的。p>

【讨论】：

不，不是。那是来自父节点。
其他选项是scrollTop 和scrollLeft。