offsetTop 与 jQuery.offset().top

IT技术 javascript jquery offset
2021-03-07 11:18:10

我已阅读该内容offsetLeftoffsetTop但并非在所有浏览器中都能正常工作。 jQuery.offset()应该为此提供一个抽象以提供正确的值 xbrowser。

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

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

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

我想认为这offset()是返回正确的值,我应该使用它,因为它可以跨浏览器工作。但是,人们显然无法点击像素的小数点。确定Math.round()jQuery 返回的偏移量的真实偏移量的正确方法是什么?我应该offsetTop改用,还是完全使用其他方法?

5个回答

这就是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()获取相对于文档 视口的坐标(见评论)。它可能会返回分数值,因此这是您的错误的来源。当页面缩放时,它也可能导致 IE<8 中的错误为避免分数值,请尝试迭代计算位置

结论

  • 如果您想要相对于父节点的坐标,请使用element.offsetTop. element.scrollTop如果要考虑父滚动,请添加(或者使用 jQuery .position()如果你是那个库的粉丝)
  • 如果您想要相对于视口的坐标,请使用element.getBoundingClientRect().top. window.pageYOffset如果要考虑文档滚动,请添加clientTop如果文档没有边框(通常没有),则不需要减去文档,因此您具有相对于文档的位置
  • element.clientTop如果不将元素边框视为元素的一部分,则减去
@Klaus:你能解释一下到底有什么区别吗?
2021-04-18 11:18:10
Element.getBoundingClientRect()给出相对于视口的位置,而不是文档
2021-04-20 11:18:10
@JanTuroň:不同之处在于它相对于浏览器窗口的顶部,而不是文档“真正的顶部”。例如,这意味着如果您将其顶部滚动到窗口顶部,它将返回负值。
2021-05-06 11:18:10

我认为你说人们不能点击半像素是对的,所以就个人而言,我会使用四舍五入的 jQuery 偏移量......

使用 CSS 缩放时 jQuery 偏移有问题
2021-04-18 11:18:10

试试这个: parseInt(jQuery.offset().top, 10)

我希望这背后有一个原因,所以我可以投票给你
2021-04-28 11:18:10

可能的是,在offset可能是一个非整数,使用em作为测量单元,相对于font-sizes%

我还推测,offsetzoom不是可能不是整数,100%但这取决于浏览器如何处理缩放。

如果缩放不是 100%,offset().top 会给你带来很多其他问题...... bugs.jquery.com/ticket/8362
2021-04-29 11:18:10

您可以使用parseInt(jQuery.offset().top)始终int在所有浏览器中使用整数(原始 - )值。

OP 指出,在一个浏览器中它给出 327.5,而在另一个浏览器中它给出 328。所以如果你只取整数部分(截断),OP 本身就是一个例子,它在所有浏览器中都不相同。对于这个例子,至少它必须四舍五入才能给出相同的数字。
2021-05-08 11:18:10
它只会取数字的整数部分,并且在所有浏览器中都是相同的。
2021-05-12 11:18:10
parseInt() 是舍入双精度还是截断它们?
2021-05-14 11:18:10