Question

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

我的代码如下：

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

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

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

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

Answer 1

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