从父顶部获取子元素距离

Question

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

我需要得到该元素及其滚动母公司之间的距离，如上面的图片，但两者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

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

基本上，公式是：

childElementDistanceFromParentTop = actualChildElementDistancefromTop - parentElementDistanceFromTop

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

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