javascript - 获取子元素距父元素顶部的距离

Question

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

我需要获取该元素与其可滚动父元素之间的距离，如上图所示，但两者都是 element.getBoundingClientRect().top和 element.offsetTop给我错误的值(value)观。可以吗？

我做了一支笔，让事情变得更简单:

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

有了这些坐标，我什至可以判断元素是否在视口(viewport)中可见。

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