获取 HTML 元素相对于容器可见部分的滚动位置

Question

现在我有一个网页：

1. 顶部的固定标题，大小不一，覆盖页面的主要内容。
2. 具有深度嵌套滚动容器的页面。
3. 在该容器中，还有其他几个深度嵌套的元素。

我想要做的是滚动该容器，使里面的元素之一与容器的 可见 部分的顶部对齐。 我相信我正在寻找的是嵌套元素的顶部相对于容器可见部分的顶部。

不幸的是，我不能使用.offsetTop，因为它只引用元素的直接父元素，并且由于页面的结构，这些元素嵌套得太深而无法使用。它总是一个固定的数字。与滚动容器相同；它的直接父级不是窗口。令人沮丧的是，标题的高度不是固定的，所以我不能很容易地将它硬编码到我的计算中。我也不能使用 jQuery。

我尝试对元素和容器使用getBoundingClientRect，但它们之间的距离始终是固定的，并且它没有提供我需要的关于元素相对于容器滚动距离的信息不幸的是，可见区域。

编辑：我们已经有了滚动解决方案，但我们希望通过某种提议的方法来改进它，我正在尝试确定其可行性。我想请大家尽量只用粗体回答问题，而不是提出替代方案。我真的很感谢提供的任何帮助，但我希望能根据一个非常具体的场景获得一些非常具体的信息。

Answer 1

我之前也遇到过这种问题，你可以试试这个自动滚动到元素

var elem = <some select operation that returns the element>;
elem.id = <some temp id> //if no id is there
var a  = document.createElement('a');
a.href = "#" + elem.id;
a.click();

如果您愿意，可以在完成后从元素中删除 id。