Element.getBoundingClientRect()
element.getBoundingClientRect()
Gibt das Rechteck des Elements zurück – x, y, width, height, top, left, right, bottom – in Pixeln relativ zum sichtbaren Teil des Fensters (inklusive Rahmen und Innenabstand).
Das Beispiel arbeitet mit dem HTML über dem Code.
Rückgabewert
Ein DOMRect-Objekt.
Beispiele
<div style="margin: 0; height: 1200px"><div id="box" style="position: absolute; left: 100px; top: 900px; width: 200px; height: 50px; padding: 5px; border: 2px solid"></div></div>
const box = document.getElementById('box');
const r = box.getBoundingClientRect();
console.log(r.left, r.top, r.width, r.height);
const isVisible = (el) => {
const b = el.getBoundingClientRect();
return b.top < window.innerHeight && b.bottom > 0;
};
console.log(isVisible(box), window.innerHeight);
window.scrollTo({ top: 500, behavior: 'instant' });
console.log(box.getBoundingClientRect().top, box.getBoundingClientRect().top + window.scrollY, isVisible(box));
Ausgabe:
100 900 214 64 false 800 484 900 true
Worauf Sie achten sollten
- Die Position ist relativ zum Fenster, nicht zur Seite – nach dem Scrollen ändert sie sich. Die Position auf der Seite ist
top + window.scrollY. - Die Werte können Dezimalzahlen sein.
- Um zu beobachten, ob ein Element sichtbar ist, ist IntersectionObserver effizienter als ein erneuter Aufruf bei jedem Scrollen.
Browserunterstützung
Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 2, Firefox 3, Safari 4; nicht in Node.js (Browser-API). Stand: Oktober 2026 (MDN browser-compat-data).
Siehe auch:
Element.scrollIntoView()
window.scrollTo()
getComputedStyle()
IntersectionObserver