Get the position of an element relative to the document

Add the scroll offsets to the element’s viewport position.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function getPosition(element) { const rect = element.getBoundingClientRect(); return { left: rect.left + window.scrollX, top: rect.top + window.scrollY }; }

Usage

Markup

<div style="height: 1000px"></div>
<p id="target" style="margin: 0 0 0 40px">Target</p>
<div style="height: 2000px"></div>

Script

const target = document.querySelector('#target');
getPosition(target); // → { left: 40, top: 1000 }
window.scrollTo(0, 600);
getPosition(target); // → { left: 40, top: 1000 }
target.getBoundingClientRect().top; // → 400

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

Know the limits

• The original assigned to an undeclared r: a ReferenceError in strict mode and ES modules.
• getBoundingClientRect is relative to the viewport, as the last line shows; adding the scroll offsets gives document coordinates that stay put while scrolling.
• Transforms are included, and values are fractional when layout is.

The function above is the code the usage lines run. It does not validate its arguments; add checks where it receives untrusted input.

Keep exploring

• Check if a given DOMRect is contained within another DOMRect — True when the target lies inside the container or on its edges.
• Check if two DOMRects intersect — Two rects intersect when they meet on both axes.
• Compare two DOMRects for size and position match — Compare x, y, width and height exactly.