Saturday, 3 April 2021

Get element position relative to page with overflows

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 getBoundingClientRect(), offsetTop etc.)

As an example of what I mean: https://material.angular.io/cdk/drag-drop/overview

In the "Basic Drag&Drop" section, if you get elements' Y position without scrolling the page, you get 626 for element.getBoundingClientRect().top

Before scroll

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

After scroll

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.



from Get element position relative to page with overflows

No comments:

Post a Comment