Javascript 获取从父元素顶部到子元素的距离

假设我在一个可滚动的div中有一个

元素，滚动设置为在视口中显示该元素

我需要获取该元素与其可滚动父元素之间的距离，如上图所示，但是

元素.getBoundingClientRect（）.top

和

元素.offsetTop

都给了我错误的值。那能做到吗

我做了一支笔，让事情变得简单一点：

我的一段代码：

document.addEventListener("DOMContentLoaded", function(event) { 
  var selectedEl = document.getElementById('consequatur-51');
  var selectedElRect = selectedEl.getBoundingClientRect();
  var sidebar = document.getElementById('sidebar');  
  sidebar.scrollTop = selectedEl.offsetTop - 60;

  document.getElementById('offsetTop').innerText = selectedEl.offsetTop;
  document.getElementById('rectTop').innerText = selectedElRect.top;
});

如果执行

var childParentDistance=Math.abs（parentTop-currentChildTop）

，则将获得子元素与其父元素之间的初始距离。但在滚动时，您需要说明滚动量。像这样

var scrolledParentDistance= Math.abs(parentTop - parentElem.getBoundingClientRect().top);

---

如果你从

childParentDistance

中减去

scrolled parentdistance

，你将得到这个孩子和它的父母之间的新距离

我发现了如何使它工作。实际上，@Dummy的回答给了我一些重要的见解

基本上，公式是：

childElementDistanceFromParentTop = actualChildElementDistancefromTop - parentElementDistanceFromTop

通过这些坐标，我甚至可以判断元素在视口中是否可见

---

更新的笔：

您的

scrolledParentDistance

将始终为0。否。如果您有可滚动元素，当您滚动其中的内容时，其顶部的

将发生变化。因此，当您滚动
getBoundingClientRect（）时，top
也会改变。正如您所知，
getBoundingClientRect（）.top
返回当前时间点从元素顶部到视口顶部的距离，它不是一个固定值。您定义了
parentTop=parentElem.getBoundingClientRect（）.top
，然后定义了
parentTop-parentElem.getBoundingClientRect（）.top
基本上是
parentTop-parentTop
，因此
0
。如果创建一个可滚动的测试元素并运行该代码，则只要滚动内容，它就会返回一个非零值。未滚动时，parentTop=parentElem.getBoundingClientRect（）.top将缓存此父元素的“实际”距离，然后
parentElem.getBoundingClientRect（）.top
将返回父元素相对于视口顶部的新距离（假定已滚动）。要指出的是，如果您有一个可滚动的元素，那么它的
scrollHeight
将大于我刚才测试的
clientHeight
<代码>scrolledParentDistance

始终为0。

childElementDistanceFromParentTop = actualChildElementDistancefromTop - parentElementDistanceFromTop