Javascript 使用 jQuery 确定元素在屏幕上的绝对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13929972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute position of an element on the screen using jQuery
提问by ATOzTOA
How do I find out the absolute position of an element on the current visible screen (viewport) using jQuery?
如何使用 jQuery 找出元素在当前可见屏幕（视口）上的绝对位置？
I am having position:relative, so offset() will only give the offset within the parent.
我有position:relative，所以 offset() 只会给出父级内的偏移量。
I have hierarchical divs, so $("#me").parent().offset() + $("#me").offset()doesn't help either.
我有分层 div，所以$("#me").parent().offset() + $("#me").offset()也无济于事。
I need the position in the window, not the document, so when the document is scrolled, the value should change.
我需要窗口中的位置，而不是文档，所以当文档滚动时，值应该改变。
I know I could add up all the parent offsets, but I want a cleaner solution.
我知道我可以把所有的父偏移量加起来，但我想要一个更清晰的解决方案。
var top = $("#map").offset().top +
$("#map").parent().offset().top +
$("#map").parent().parent().offset().top +
$("#map").parent().parent().parent().offset().top;
Any ideas?
有任何想法吗？
Update:I need to get the exact gap in pixels between the top of my div and the top of the document, including padding/margins/offset?
更新：我需要获得我的 div 顶部和文档顶部之间的确切像素间隙，包括填充/边距/偏移量？
My code:
我的代码：
HTML
HTML
<div id="map_frame" class="frame" hidden="hidden">
<div id="map_wrapper">
<div id="map"></div>
</div>
</div>
CSS
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 to resize the map to fill the screen*
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));
Thanks...
谢谢...
回答by jfriend00
See .offset()here in the jQuery doc. It gives the position relative to the document, not to the parent. You perhaps have .offset()and .position()confused. If you want the position in the window instead of the position in the document, you can subtract off the .scrollTop()and .scrollLeft()values to account for the scrolled position.
请参阅jQuery 文档中的.offset()此处。它给出了相对于文档的位置，而不是父级。你也许有和混淆。如果您想要窗口中的位置而不是文档中的位置，您可以减去和值以说明滚动位置。.offset().position().scrollTop().scrollLeft()
Here's an excerpt from the doc:
这是文档的摘录：
The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.
.offset() 方法允许我们检索元素相对于文档的当前位置。将此与 .position() 进行对比，后者检索相对于偏移父级的当前位置。当将新元素放置在现有元素之上以进行全局操作（特别是实现拖放）时，.offset() 更有用。
To combine these:
结合这些：
var offset = $("selector").offset();
var posY = offset.top - $(window).scrollTop();
var posX = offset.left - $(window).scrollLeft();
You can try it here (scroll to see the numbers change): http://jsfiddle.net/jfriend00/hxRPQ/
你可以在这里尝试（滚动查看数字变化）：http: //jsfiddle.net/jfriend00/hxRPQ/
回答by Marcel
For the absolute coordinates of any jquery element I wrote this function, it probably doesnt work for all css position types but maybe its a good start for someone ..
对于我编写此函数的任何 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;
}
回答by SimfikDuke
BTW, if anyone want to get coordinates of element on screen without jQuery, please try this:
顺便说一句，如果有人想在没有 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
}
}
