Signatur
Beschreibung
rootBounds beschreibt die Fläche, mit der das beobachtete Element (target) zum Zeitpunkt der Messung verglichen wurde. Die Eigenschaft gibt es an jedem IntersectionObserverEntry, den ein IntersectionObserver an seinen Rückruf übergibt. Sie ist schreibgeschützt und wird bei jeder Beobachtung neu berechnet.
Wie das Rechteck berechnet wird, hängt von der Wurzel (root) ab:
- Implizite Wurzel (
root: null): das Rechteck des Viewports des obersten Dokuments. - Element als Wurzel mit Überlauf-Beschneidung (z. B.
overflow: auto): der Padding-Bereich des Elements. - Sonst: das Begrenzungsrechteck des Wurzel-Elements.
Danach wird das Rechteck um den rootMargin des Observers erweitert (positive Werte) oder verkleinert (negative Werte). Alle Koordinaten sind in CSS-Pixeln relativ zum Viewport, genauso wie bei boundingClientRect und intersectionRect. So lassen sich die drei Rechtecke direkt miteinander vergleichen.
In der Praxis braucht man rootBounds vor allem zur Fehlersuche bei rootMargin-Einstellungen, um festzustellen, ob ein Element oberhalb oder unterhalb der Wurzel liegt (z. B. bei Sticky-Headern oder Scroll-Richtungserkennung), und für eigene Sichtbarkeitsberechnungen.
Rückgabewert
DOMRectReadOnly mit x, y, width, height, top, right, bottom und left des Wurzel-Schnittrechtecks (inkl. rootMargin). null, wenn das Ziel nicht zum selben Origin-Bereich gehört wie die implizite Wurzel, z. B. in einem ursprungsfremden iframe.Beispiele
Wurzelrechteck mit und ohne rootMargin ausgeben
const target = document.querySelector('#hero');
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
const { top, bottom, height } = entry.rootBounds ?? {};
console.log('rootBounds:', { top, bottom, height });
}
}, {
root: null, // Viewport
rootMargin: '-100px 0px' // oben und unten je 100px schmaler
});
observer.observe(target);Liegt das Element über oder unter dem sichtbaren Bereich?
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(({ target, isIntersecting, boundingClientRect, rootBounds }) => {
if (isIntersecting || !rootBounds) return;
const position = boundingClientRect.bottom <= rootBounds.top
? 'oberhalb'
: 'unterhalb';
console.log(`${target.id} hat den Bereich ${position} verlassen`);
});
});
sections.forEach((s) => observer.observe(s));Scroll-Container als Wurzel und null-Absicherung
const list = document.querySelector('.scroll-list');
const sentinel = document.querySelector('.scroll-list .sentinel');
const observer = new IntersectionObserver(([entry]) => {
if (entry.rootBounds === null) {
console.warn('rootBounds nicht verfügbar (ursprungsfremder Kontext)');
return;
}
const abstand = entry.boundingClientRect.top - entry.rootBounds.bottom;
console.log(`Sentinel ist ${Math.round(abstand)}px vom unteren Rand entfernt`);
if (entry.isIntersecting) console.log('Nächste Seite nachladen …');
}, { root: list, rootMargin: '0px 0px 200px 0px' });
observer.observe(sentinel);// Wichtig · Fallstricke
- Kann
nullsein: Wird ein Element in einem ursprungsfremden (cross-origin) iframe mit impliziter Wurzel beobachtet, istrootBoundsaus Datenschutzgründennull. Vor dem Zugriff auf Eigenschaften immer prüfen, z. B. mitentry.rootBounds?.top. rootMarginist schon eingerechnet: Mit einem Margin entspricht der Wert nichtroot.getBoundingClientRect(). Prozentangaben im Margin beziehen sich auf die Größe der Wurzel.- Momentaufnahme: Der Wert gilt nur für den Zeitpunkt
entry.time. Nach Scrollen oder Größenänderungen ist er veraltet. Nicht zwischenspeichern. - Viewport-Koordinaten: Auch bei einem Element als Wurzel beziehen sich die Koordinaten auf den Viewport, nicht auf den Scroll-Container.
- Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+). Der Internet Explorer braucht ein Polyfill.