Signatur
Beschreibung
Die Eigenschaft target eines IntersectionObserverEntry verweist auf genau das DOM-Element, für das der Eintrag erzeugt wurde. Ein einzelner IntersectionObserver kann beliebig viele Elemente über observe() beobachten. Der Callback bekommt dann ein Array von Einträgen, und erst über entry.target erfährt man, welches Element sich in den sichtbaren Bereich hinein- oder aus ihm herausbewegt hat.
Typische Einsatzfälle sind Lazy Loading von Bildern (das Ziel-Element bekommt sein src aus einem data-*-Attribut), Einblend-Animationen beim Scrollen (über eine CSS-Klasse am Ziel), Scrollspy-Navigationen (anhand der id des Ziels den passenden Menüpunkt markieren) und das Abmelden eines Elements mit observer.unobserve(entry.target), sobald es einmal sichtbar war.
Der Wert ist eine echte Referenz auf den DOM-Knoten und keine Kopie. Man kann also direkt Attribute, Klassen oder dataset lesen und ändern. Die Eigenschaft selbst ist schreibgeschützt: Wenn man ihr etwas zuweist, bleibt das ohne Wirkung.
Rückgabewert
Element, dessen Überschneidungsstatus mit der Wurzel sich geändert hat. Es ist dasselbe Objekt, das an observe() übergeben wurde.Beispiele
Lazy Loading von Bildern
// HTML: <img data-src="foto.jpg" alt="..." class="lazy">
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
obs.unobserve(img); // nur einmal laden
console.log('Geladen:', img.dataset.src);
});
}, { rootMargin: '200px' });
document.querySelectorAll('img.lazy').forEach((img) => observer.observe(img));Einblend-Animation beim Scrollen
const revealObserver = new IntersectionObserver((entries) => {
for (const entry of entries) {
// Klasse je nach Sichtbarkeit setzen oder entfernen
entry.target.classList.toggle('sichtbar', entry.isIntersecting);
}
}, { threshold: 0.25 });
document.querySelectorAll('.karte').forEach((el) => revealObserver.observe(el));Scrollspy: aktiven Menüpunkt markieren
const links = new Map(
[...document.querySelectorAll('nav a[href^="#"]')]
.map((a) => [a.getAttribute('href').slice(1), a])
);
const spy = new IntersectionObserver((entries) => {
entries
.filter((e) => e.isIntersecting)
.forEach((e) => {
links.forEach((a) => a.classList.remove('aktiv'));
links.get(e.target.id)?.classList.add('aktiv');
console.log('Aktiver Abschnitt:', e.target.id);
});
}, { rootMargin: '-50% 0px -50% 0px' });
document.querySelectorAll('section[id]').forEach((s) => spy.observe(s));// Wichtig · Fallstricke
- Ziel nicht mit Wurzel verwechseln:
targetist das beobachtete Element. Das Element, gegen das die Überschneidung gemessen wird, steht inobserver.root; die Maße der Wurzel liefertentry.rootBounds. - Mehrere Einträge pro Element: In einem einzigen Callback-Aufruf können mehrere Einträge für dasselbe
targetstecken, zum Beispiel wenn es schnell hinein- und wieder herausgescrollt wurde. Entscheidend ist dann der letzte Eintrag. - Speicher: Solange ein Element beobachtet wird, hält der Observer eine Referenz darauf. Entfernte oder nicht mehr benötigte Elemente sollte man mit
unobserve(entry.target)abmelden oder den Observer mitdisconnect()beenden. - Erster Aufruf: Direkt nach
observe()wird der Callback einmal für jedes Ziel aufgerufen, auch wenn es nicht sichtbar ist. Deshalb immerisIntersectingprüfen. - Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer kennt die Schnittstelle nicht; dort braucht man einen Polyfill.