[英]offsetTop vs. jQuery.offset().top
I have read that offsetLeft
and offsetTop
do not work properly in all browsers.我读过
offsetLeft
和offsetTop
在所有浏览器中都不能正常工作。 jQuery.offset()
is supposed to provide an abstraction for this to provide the correct value xbrowser. jQuery.offset()
应该为此提供一个抽象,以提供正确的值 xbrowser。
What I am trying to do is get the coordinates of where an element was clicked relative to the top-left of the element.我想要做的是获取元素相对于元素左上角的单击位置的坐标。
Problem is that jQuery.offset().top
is actually giving me a decimal value in FFX 3.6 (in IE and Chrome, the two values match).问题是
jQuery.offset().top
实际上在 FFX 3.6 中给了我一个十进制值(在 IE 和 Chrome 中,这两个值匹配)。
This fiddle exhibits the issue.这个小提琴展示了这个问题。 If you click the bottom image,
jQuery.offset().top
returns 327.5, but offsetTop
returns 328.如果单击底部图像,
jQuery.offset().top
返回 327.5,但offsetTop
返回 328。
I would like to think that offset()
is returning the correct value and I should use it because it will work across browsers.我想认为
offset()
正在返回正确的值,我应该使用它,因为它可以跨浏览器工作。 However, people obviously cannot click decimals of pixels.然而,人们显然不能点击像素的小数点。 Is the proper way to determine the true offset to
Math.round()
the offset that jQuery is returning?确定
Math.round()
的真实偏移量的正确方法是 jQuery 返回的偏移量吗? Should I use offsetTop
instead, or some other method entirely?我应该使用
offsetTop
代替,还是完全使用其他方法?
This is what jQuery API Doc says about .offset()
:这就是jQuery API Doc所说的关于
.offset()
的内容:
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document .
获取第一个元素的当前坐标,或设置匹配元素集中每个元素相对于文档的坐标。
This is what MDN Web API says about .offsetTop
:这是MDN Web API关于
.offsetTop
的说法:
offsetTop returns the distance of the current element relative to the top of the offsetParent node
offsetTop 返回当前元素相对于offsetParent 节点顶部的距离
This is what jQuery v.1.11 .offset()
basically do when getting the coords:这就是 jQuery v.1.11
.offset()
在获取坐标时基本上所做的:
var box = { top: 0, left: 0 };
// BlackBerry 5, iOS 3 (original iPhone)
if ( typeof elem.getBoundingClientRect !== strundefined ) {
box = elem.getBoundingClientRect();
}
win = getWindow( doc );
return {
top: box.top + ( win.pageYOffset || docElem.scrollTop ) - ( docElem.clientTop || 0 ),
left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
};
pageYOffset
intuitively says how much was the page scrolled pageYOffset
直观地说页面滚动了多少docElem.scrollTop
is the fallback for IE<9 (which are BTW unsupported in jQuery 2) docElem.scrollTop
是 IE<9 的后备(顺便说一句,jQuery 2 不支持)docElem.clientTop
is the width of the top border of an element (the document in this case) docElem.clientTop
是元素上边框的宽度(本例中的文档)elem.getBoundingClientRect()
gets the coords relative to the elem.getBoundingClientRect()
获取相对于 Conclusion结论
element.offsetTop
.element.offsetTop
。 Add element.scrollTop
if you want to take the parent scrolling into account.element.scrollTop
。 (or use jQuery .position() if you are fan of that library) element.getBoundingClientRect().top
.element.getBoundingClientRect().top
。 Add window.pageYOffset
if you want to take the document scrolling into account.window.pageYOffset
。 You don't need to subtract document's clientTop
if the document has no border (usually it doesn't), so you have position relative to the documentclientTop
,因此相对于文档具有 positionelement.clientTop
if you don't consider the element border as the part of the elementelement.clientTop
I think you are right by saying that people cannot click half pixels, so personally, I would use rounded jQuery offset...我认为你说人们不能点击半像素是对的,所以就个人而言,我会使用四舍五入的 jQuery 偏移量......
Try this: parseInt(jQuery.offset().top, 10)
试试这个:
parseInt(jQuery.offset().top, 10)
It is possible that the offset
could be a non-integer, using em
as the measurement unit, relative font-sizes
in %
. offset
可能是非整数,使用em
作为测量单位,相对font-sizes
以%
为单位。
I also theorise that the offset
might not be a whole number when the zoom
isn't 100%
but that depends how the browser handles scaling.我还推测,当
zoom
不是100%
时, offset
可能不是整数,但这取决于浏览器如何处理缩放。
You can use parseInt(jQuery.offset().top)
to always use the Integer (primitive - int
) value across all browsers.您可以使用
parseInt(jQuery.offset().top)
在所有浏览器中始终使用 Integer (primitive - int
) 值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.