jquery 元素的屏幕坐标(通过Javascript)

ljsrvy3e  于 2022-11-03  发布在  jQuery
关注(0)|答案(4)|浏览(151)

我试图获取浏览器窗口中某个元素的屏幕坐标(即相对于屏幕左上角的坐标),很容易获取窗口的大小和位置(screenX,screenY),也很容易(使用jQuery)获取元素的偏移量($('element').offset().left)。
但是,我需要知道从元素到屏幕角落的像素数。我发现了一些似乎是IE特有的东西,但我希望它能在尽可能多的浏览器中工作。
编辑添加图片:

tv6aics1

tv6aics11#

window.screenX/Y。但对于其他浏览器,位置的近似值为:

var top = $("#myelement").offset().top + window.screenY;
var left = $("#myelement").offset().left + window.screenX;

确切的位置取决于哪些工具栏是可见的。您可以使用window对象的outer/innerWidthouter/innerHeight属性使其更接近。
IE并没有提供太多的窗口属性,但奇怪的是,一个click事件对象会提供点击的屏幕位置。

function calibrate(event){
    var top = event.screenY;
    var left = event.screenX;
}

或者使用mouseenter/leave事件,通过该事件的坐标进行校准,但是您很难确定鼠标是从左、右、上还是下进入的。
当然,一旦他们移动屏幕,你就需要重新校准。
有关浏览器属性兼容性的更多信息,请参见PPK的对象模型表。

tyky79it

tyky79it2#

我觉得这不可能。
元素坐标是相对于所呈现页面的左上角的。
窗口坐标是相对于屏幕的。
据我所知,没有任何东西将 * 渲染页面 * 的左上角与 * 窗口 * 的左上角联系起来。所以没有办法考虑边框、滚动条、镶边等。所以我认为你在这一点上陷入了困境。

wnavrhmk

wnavrhmk3#

我是这样做的。

const pos = {x:number, y:number}

const scrollY = window.scrollY;

const targetArea = window?.document?.elementFromPoint(
      pos.x,
      pos.y - scrollY
 );

这并没有考虑到x滚动因子,我想这基本上就是@joel在11年前说的

相关问题