offsetTop 与 jQuery.offset().top

发布于 2024-11-25 17:38:16 字数 592 浏览 0 评论 0原文

我读到 offsetLeft 和 offsetTop 无法在所有浏览器中正常工作。 jQuery.offset() 应该为此提供一个抽象，以提供正确的值 xbrowser。

我想要做的是获取元素被单击的位置相对于元素左上角的坐标。

问题是 jQuery.offset().top 实际上在 FFX 3.6 中给了我一个十进制值（在 IE 和 Chrome 中，这两个值匹配）。

这个小提琴展示了这个问题。如果您单击底部图像，jQuery.offset().top 返回 327.5，但 offsetTop 返回 328。

我想 offset() 返回code> 返回正确的值，我应该使用它，因为它可以跨浏览器工作。然而，人们显然无法点击像素的小数点。确定 Math.round() 的真实偏移量的正确方法是 jQuery 返回的偏移量吗？我应该使用 offsetTop 来代替，还是完全使用其他方法？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薄暮涼年 2024-12-02 17:38:16

这是 jQuery API Doc 关于 .offset() 的内容：

获取第一个元素的当前坐标，或者设置
匹配元素集中每个元素的相对坐标
到文档。

这是 MDN Web API 关于 的说法.offsetTop：

offsetTop 返回当前元素相对于当前元素的距离
offsetParent 节点的顶部

这是 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 直观地说明了多少滚动的页面
docElem.scrollTop 是 IE<9 的后备（顺便说一句，jQuery 2 不支持）
docElem.clientTop 是元素（本例中为文档）上边框的宽度
elem.getBoundingClientRect() 获取相对于 ~~document~~ viewport 的坐标（见评论）。它可能会返回小数值，因此这是错误的根源。当页面缩放时，它还可能会导致 IE<8 出现错误。为了避免出现分数，请尝试迭代计算位置

结论

如果您想要相对于父节点的坐标，请使用element.offsetTop。如果您想考虑父级滚动，请添加 element.scrollTop。（或者使用 jQuery .position() 如果您是该库的粉丝）
如果您想要相对于视口使用element.getBoundingClientRect().top。如果您想考虑文档滚动，请添加 window.pageYOffset。如果文档没有边框（通常没有），则不需要减去文档的 clientTop，因此您可以相对于 document
减去 元素.clientTop 如果您不将元素边框视为元素的一部分

This is what jQuery API Doc says about .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:

offsetTop returns the distance of the current element relative to the
top of the offsetParent node

This is what jQuery v.1.11 .offset() basically do when getting the coords:

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
docElem.scrollTop is the fallback for IE<9 (which are BTW unsupported in jQuery 2)
docElem.clientTop is the width of the top border of an element (the document in this case)
elem.getBoundingClientRect() gets the coords relative to the ~~document~~ viewport (see comments). It may return fraction values, so this is the source of your bug. It also may cause a bug in IE<8 when the page is zoomed. To avoid fraction values, try to calculate the position iteratively

Conclusion

If you want coords relative to the parent node, use element.offsetTop. Add element.scrollTop if you want to take the parent scrolling into account. (or use jQuery .position() if you are fan of that library)
If you want coords relative to the viewport use element.getBoundingClientRect().top. Add window.pageYOffset if you want to take the document scrolling into account. 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 document
Subtract element.clientTop if you don't consider the element border as the part of the element