title: Get element position relative to page with overflows
body: <p>I want to get the position of an element relative to the whole page, but the element is in a scrollable container, which makes the methods that are usually used, useless. (Talking about <code>getBoundingClientRect()</code>, <code>offsetTop</code> etc.)</p>
  <p>As an example of what I mean:
  <a href="https://material.angular.io/cdk/drag-drop/overview" rel="nofollow noreferrer">https://material.angular.io/cdk/drag-drop/overview</a></p>
  <p>In the &quot;Basic Drag&amp;Drop&quot; section, if you get elements' Y position without scrolling the page, you get 626 for <code>element.getBoundingClientRect().top</code></p>
  <p><a href="https://i.stack.imgur.com/eBGDO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eBGDO.png" alt="Before scroll" /></a></p>
  <p>Now if you scroll down, so that the element almost touches the top of the window, you get 70 for the same exact same elmenent</p>
  <p><a href="https://i.stack.imgur.com/p0HNN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p0HNN.png" alt="After scroll" /></a></p>
  <p>But what I want, is the exact same value relative to the whole page, so the value shouldn't change after I scrolled. I know this would be the case for the default scroll behaviour, but in this case the body doesn't scroll, but its elements.</p>