Get child element distance from parent top

Question

Let's say I have an <li> element inside a scrollable div and the scroll was set to show that element in the viewport.

I need to get the distance between that element and its scrollable parent, as shown in the picture above, but both element.getBoundingClientRect().top and element.offsetTop give me the wrong values. Can that be done?

I made a pen, to make things a little bit easier:

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

A piece of my code:

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

I found out how to make it work. Actually, @Dummy's answer gave me some important insights.

Basically, the formulae is:

childElementDistanceFromParentTop = actualChildElementDistancefromTop - parentElementDistanceFromTop

With these coordinates I can even tell if the element is visible in the viewport or not.

Updated pen: http://codepen.io/Darksoulsong/pen/rWawrZ

Answer 2

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;

If you do var childParentDistance = Math.abs(parentTop - currentChildTop), you will get the initial distance between the child element and its parent. But as you scroll, you need to account for the scroll amount. Like this

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

and if you subtract scrolledParentDistance from childParentDistance, you will get the new distance between this child and its parent