jQuery 偏移顶部无法正常工作

Posted 2023-05-08

【中文标题】jQuery 偏移顶部无法正常工作

【英文标题】：jQuery offset top doesn't work correctly

【发布时间】：2012-08-18 17:38:45

【问题描述】：

我正在尝试创建一个脚本，通过鼠标在元素中绘制一些东西，我正在使用 Raphaeljs 来做到这一点。

为了正确绘图，我需要找到 top 和 left 的 ‍input‍‍ 元素。我使用var offset = $("#input").offset(); 来获取left 和top。

但是top 的值不正确。这是10px 低于 ‍‍真正的top 距离。我认为10px 可能会在不同的分辨率下发生变化，然后我无法正常添加10px 然后我想知道如何解决这个问题！

我上传了我的测试here。

【问题讨论】：

您是否检查过任何包含元素的边距或填充？

@Archer 是的。我有并且没有margin 或padding！

【参考方案1】：

jQuery .offset() 函数有this limitation:

注意：jQuery 不支持获取隐藏元素的偏移坐标或考虑在 body 元素上设置的边框、边距或填充。

在这种情况下，主体有 10 像素的上边框，这就是为什么您的绘图偏离了 10 像素。

推荐解决方案：

var offset = $("#input").offset();
x = x - offset.left - $(document.body).css( "border-left" );
y = y - offset.top + $(document.body).css( "border-top" );

【讨论】：

就像使用 offset() 属性的附录一样：我从中得到了似乎错误的结果（我试图使用 offset 来查找导航列表与顶部的距离视口，以便将该值用作引导程序的“附加”附加组件中的“顶部偏移”设置）。我发现偏移量计算错误距离，除非所有 html 元素高于 有问题的列表元素（即那些确定其在页面上的位置的元素）具有明确声明的高度。在 css 中给他们特定的高度解决了它。

【参考方案2】：

在与这个问题斗争了一段时间并查看了各种可能的答案后，我得出的结论是 jQuery offset().top（以及它使用的大概 DOM API）对于一​​般用途来说太不可靠了。它不仅被记录为排除 html 级别的边距，而且在其他几种情况下也会返回意外结果。

position().top 确实有效，但将页面设计成等效可能不切实际/不可能。

幸运的是，我发现 element.getBoundingClientRect().top 可以完美地获得相对于视口的位置。然后，如果需要，您可以添加 $(document).scrollTop() 以从文档顶部获取位置。

【参考方案3】：

我有两种不同的解决方案：

1) 您可以使用outerHeight(true) 方法计算以上元素的总高度。此方法将使用边距、填充和边框计算高度。

而且这不会造成冲突，它会返回真值。 Here is jsFiddle example.

html

<div class="header"></div>
<div class="nav"></div>
<div class="myEle"></div>

jQuery

var myEleTop = $('.header').outerHeight(true) + $('.nav').outerHeight(true);

2) 如果您将top css 定义为相对于主体定位的元素，您也可以使用此值：

parseInt($('#myEle').css('top'));

【讨论】：

我试过了！它只是返回一个异常，说 top 不存在！

我测试了$("#input").css("top") 结果是here

我添加了第二种方式，长但更稳固

@ahmadalishafiee 维护是什么意思？你只需要为此编写一个函数，然后永远保持原样......

@ahmadalishafiee 您可以创建一个全局函数，该函数获取元素并返回值。这可能并不容易，但你的代码会很干净！