Javascript jQuery 偏移顶部无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12087670/
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
jQuery offset top doesn't work correctly
提问by ahmadali shafiee
I'm trying to create an script draw something in an element by mouse and I'm using Raphaeljsto do that.
我正在尝试创建一个脚本，通过鼠标在元素中绘制一些东西，我正在使用Raphaeljs它。
For correct drawing I need to find topand leftof ?input??element. I'm using var offset = $("#input").offset();to get leftand top.
对于正确的图纸我需要找到top和left的？input??元素。我正在使用var offset = $("#input").offset();getleft和top。
But the topvalue isn't correct. It's 10pxlower than ??the real topdistance. I think the 10pxmaybe change in different resolutions then I can't add 10pxto it normally then I want to know how can I fix the problem!
但top值不正确。它10px低于??真正的top距离。我认为10px可能会更改不同的分辨率，然后我无法正常添加10px它，然后我想知道如何解决问题！
I uploaded my test here.
我在这里上传了我的测试。
回答by Kevin Nielsen
The jQuery .offset()function has this limitation:
jQuery.offset()函数有这个限制：
Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.
注意：jQuery 不支持获取隐藏元素的偏移坐标，也不支持在 body 元素上设置边框、边距或填充。
The body in this case has a 10px top border, which is why your drawing is off by 10 pixels.
在这种情况下，主体有一个 10 像素的顶部边框，这就是为什么您的绘图偏离了 10 像素。
Recommended solution:
推荐解决方案：
var offset = $("#input").offset();
x = x - offset.left - $(document.body).css( "border-left" );
y = y - offset.top + $(document.body).css( "border-top" );
回答by Leo Hendry
After fighting with this for a while and reviewing various potential answers I have concluded that jQuery offset().top(and presumably DOM API that it uses) is too unreliable for general use. Not only is it documented as excluding html level margins, but it also returns unexpected results in several other cases.
在与此斗争了一段时间并查看了各种可能的答案后，我得出结论，jQuery offset().top（可能还有它使用的 DOM API）对于一般用途来说太不可靠了。它不仅被记录为排除 html 级别的边距，而且还在其他几种情况下返回意外结果。
position().topdoes work, but it may not be practical / possible to design the page so that it is equivalent.
position().top确实有效，但设计页面使其等效可能不切实际/不可能。
Fortunately I have found that element.getBoundingClientRect().topgets the position relative to the viewport perfectly. You can then add on $(document).scrollTop()to get the position from the top of the document if required.
幸运的是，我发现element.getBoundingClientRect().top完美地获得了相对于视口的位置。然后，如果需要，您可以添加$(document).scrollTop()以从文档顶部获取位置。
回答by Barlas Apaydin
I have two different solutions:
我有两种不同的解决方案：
1)You can calculate above element's total height with outerHeight(true)method. This method will calculate height with margins, paddings and borders.
1)您可以使用externalHeight(true)方法计算上述元素的总高度。此方法将计算带有边距、填充和边框的高度。
And this won't create conflict, it will return true value. Here is jsFiddle example.
这不会造成冲突，它会返回真值。 这是 jsFiddle 示例。
html
html
<div class="header"></div>
<div class="nav"></div>
<div class="myEle"></div>
jQuery
jQuery
var myEleTop = $('.header').outerHeight(true) + $('.nav').outerHeight(true);
2)If you defined topcss to the element which is postioned relative to the body, you can use this value too:
2)如果您将topcss定义为相对于主体定位的元素，您也可以使用此值：
parseInt($('#myEle').css('top'));
