JavaScript getBoundingClientRect() changes while scrolling

javascript getboundingclientrect
enzian picture enzian · Sep 2, 2014 · Viewed 87.4k times · Source

I want to have the exact distance between the Y-coordinate of an element an the Y-value=0, which I consider as the top of the document.

myElement.getBoundingClientRect().top;

But the value of getBoundingClientRect() seems to change while scrolling. How can I get the real distance between myElement and the Y-coordinate=0 (top of document)?

Answer

n4m31ess_c0d3r picture n4m31ess_c0d3r · Nov 25, 2014

It is because getBoundingClientRect() gets values with respect to the window(only the current visible portion of the page), not the document(whole page).
Hence, it also takes scrolling into account when calculating its values
Basically, document = window + scroll

So, to get the distance between myElement and the Y-coordinate=0 (top of document), you would have add the value of vertical-scroll also:

myElement.getBoundingClientRect().top + window.scrollY;

Source: https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

Related questions

getBoundingClientRect in each: undefined is not a function

So I am trying to call some functions when fullscreen sections are in the viewport. Let's say I have 7 sections, then I want something to happen when a certain section is inside the viewport (I have a function that snaps …

Read More
In google chrome, getBoundingClientRect().x is undefined

I'm performing drawing operations on canvas. The best way to calculate cursor position relative to canvase top left corner is, in my opinion, usage of .getBoundingClientRect(): HTMLCanvasElement.prototype.relativeCoords = function(event) { var x,y; //This is the current screen rectangle …

Read More
How best to convert a ClientRect / DomRect into a plain Object

The result of someElement.getBoundingClientRect() returns a special object of type ClientRect (or DomRect apparently) It is structured like {top: 10, right: 20, bottom: 30, left: 10, width: 10} Unfortunately, this object does not behave quite like other objects. For example, using Object.keys on …

Read More