从父母顶部获取子元素距离

Question

假设我在可滚动div中有一个<li>元素，并且滚动设置为在视口中显示该元素。

我需要获取该元素与其可滚动父级之间的距离，如上图所示，但element.getBoundingClientRect().top和element.offsetTop都给出了错误的值。可以这样做吗？

我做了一支笔，让事情变得更容易一些：

http://codepen.io/Darksoulsong/pen/LbYMex

我的一段代码：

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;
});

Answer 1

var parentTop = parentElem.getBoundingClientRect().top; // Initial parent's top distance from the top of the viewport;

var currentChildTop = childElement.getBoundingClientRect().top; // Initial child's top distance from the top of the viewport;

如果执行var childParentDistance = Math.abs(parentTop - currentChildTop)，您将获得子元素与其父元素之间的初始距离。但是在滚动时，您需要考虑滚动量。喜欢这个

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

如果从scrolledParentDistance中减去childParentDistance，您将获得该子项与其父项之间的新距离

Answer 2

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

基本上，公式是：

childElementDistanceFromParentTop = actualChildElementDistancefromTop - parentElementDistanceFromTop

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

更新了笔：http://codepen.io/Darksoulsong/pen/rWawrZ