在jQuery中获取相对于祖先的偏移量答案

【问题标题】：Get offset relative to an ancestor in jQuery在jQuery中获取相对于祖先的偏移量
【发布时间】：2012-11-22 17:16:14
【问题描述】：

我有一个小的可滚动 div，其中包含一个非常大的结果树，分层嵌套并显示为一个巨大的缩进列表。当单击页面上其他位置的自动完成建议时，我希望该 div 向下滚动到树项目之一。问题是计算在可滚动 div 内滚动到的偏移量。我需要获取目标顶部和可滚动 div 顶部之间的距离，但有一些复杂性。

我的代码如下所示：

$('#coltree').animate({
    scrollTop: $node.offset().top - $('#coltree').offset().top
}, 800);

coltree 是包含可滚动 div 的 id，$node 是一个 jQuery 对象，其中包含我要滚动到的元素（在 coltree div 内）。

现在，并发症。我需要获取可滚动 div 顶部和目标元素顶部之间的距离。我上面使用的方法只有在coltree 已经一直向上滚动时才有效。例如，如果您已经滚动到一个元素，点击另一个建议将滚动到错误的位置，因为 coltree 的内容已经相对于页面移动了。

我不想将树从可滚动 div 中取出，因为它之前和之后都有内容，而且树可能有很多页长。使用 jQuery 的 .position() 方法将不起作用，因为 coltree 不是目标的直接父级。我需要一种方法来获取或计算元素相对于某个任意祖先的垂直位置。

【问题讨论】：

【解决方案1】：

我想出的解决方案是将 coltree 包装在另一个 div 中，并使该包装器成为滚动 div。由于coltree 现在随着目标 div 移动，因此每次减去它们的偏移量都会得到正确的值。对上述代码唯一需要的更改是为可滚动包装器设置动画，而不是 coltree。

【讨论】：