Erkennung von Elementen im Viewport mit Intersection Observer

Die Verfolgung der Sichtbarkeit von Elementen mit Scroll-Event-Listenern kann die Performance Ihrer Website erheblich beeinträchtigen. Jeder Scroll löst mehrere Events aus, die jeweils getBoundingClientRect() aufrufen und kostspielige Browser-Reflows erzwingen. Die Intersection Observer API löst dieses Problem elegant und bietet native Browser-Optimierung für die Erkennung, wann Elemente in den Viewport eintreten oder ihn verlassen.

Warum traditionelle Scroll-Events nicht ausreichen

Scroll-Event-Listener feuern kontinuierlich während des Scrollens und lösen oft mehr als 60 Mal pro Sekunde aus. Jeder Event-Handler, der getBoundingClientRect() aufruft, zwingt den Browser zur Neuberechnung von Layouts und erzeugt ruckelige Scroll-Erfahrungen. Wenn mehrere Bibliotheken unabhängig voneinander die Sichtbarkeit verfolgen – für Werbung, Analytics und Lazy Loading – verstärkt sich der Performance-Verlust dramatisch.

Der Intersection Observer-Ansatz verlagert diese Berechnungen vom Haupt-Thread weg und lässt den Browser optimieren, wann und wie Intersection-Prüfungen stattfinden.

Grundlagen der Intersection Observer API verstehen

Die Intersection Observer API überwacht asynchron, wann Zielelemente die Grenzen mit einem Root-Element (typischerweise dem Viewport) überschreiten. Anstatt konstant zu prüfen, benachrichtigt sie Sie nur, wenn Sichtbarkeitsschwellenwerte überschritten werden.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element ist sichtbar');
    }
  });
});

observer.observe(document.querySelector('.target'));

Der Browser übernimmt alle Intersection-Berechnungen intern und liefert Ergebnisse über einen Callback mit IntersectionObserverEntry-Objekten. Jeder Entry stellt isIntersecting (Boolean) und intersectionRatio (Sichtbarkeitsprozentsatz von 0-1) bereit.

Ihren ersten Observer erstellen

Die Einrichtung eines Intersection Observers erfordert nur eine Callback-Funktion und optionale Konfiguration:

const callback = (entries, observer) => {
  entries.forEach(entry => {
    // Verfügbare Schlüsseleigenschaften
    console.log({
      isVisible: entry.isIntersecting,
      visibilityRatio: entry.intersectionRatio,
      targetElement: entry.target
    });
  });
};

const options = {
  root: null,        // viewport
  rootMargin: '0px', // kein Offset
  threshold: 0.5     // 50% sichtbar
};

const observer = new IntersectionObserver(callback, options);
observer.observe(document.querySelector('.target'));

Der Callback erhält ein Array von Entries, da Observer mehrere Elemente gleichzeitig verfolgen können. Die isIntersecting-Eigenschaft jedes Entries zeigt die aktuelle Sichtbarkeit an, während intersectionRatio den präzisen Sichtbarkeitsprozentsatz liefert.

Observer-Optionen konfigurieren

Drei Optionen steuern, wann Intersection-Callbacks ausgelöst werden:

root: Definiert den zu überwachenden scrollbaren Bereich. null verwendet den Viewport; jedes scrollbare Element funktioniert als benutzerdefinierter Root.

rootMargin: Erweitert oder verkleinert die Bounding Box des Roots. Verwenden Sie CSS-Margin-Syntax: "50px" oder "10% 0px". Negative Werte verkleinern; positive Werte erweitern den Erkennungsbereich.

threshold: Sichtbarkeitsprozentsatz(e), die Callbacks auslösen. Einzelwert: 0.5 (50%). Array für mehrere Auslöser: [0, 0.25, 0.5, 0.75, 1].

Effiziente Überwachung mehrerer Elemente

Eine Observer-Instanz kann unbegrenzt viele Elemente überwachen:

const observer = new IntersectionObserver(callback, options);
const targets = document.querySelectorAll('.lazy-load');

targets.forEach(target => observer.observe(target));

// Überwachung spezifischer Elemente stoppen
// observer.unobserve(element);

// Überwachung aller Elemente stoppen
// observer.disconnect();

Dieses Pattern maximiert die Effizienz – der Browser optimiert einen einzelnen Observer, der Hunderte von Elementen überwacht, besser als mehrere Observer.

Praxisnahe Implementierungsbeispiele

Lazy Loading von Bildern

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      imageObserver.unobserve(img);
    }
  });
}, { rootMargin: '50px' });

document.querySelectorAll('img[data-src]').forEach(img => {
  imageObserver.observe(img);
});

Animationen beim Scrollen auslösen

const animationObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(element => {
  animationObserver.observe(element);
});

Automatische Videowiedergabe im Sichtbereich

const videoObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const video = entry.target;
    if (entry.isIntersecting) {
      video.play();
    } else {
      video.pause();
    }
  });
}, { threshold: 0.5 });

document.querySelectorAll('video').forEach(video => {
  videoObserver.observe(video);
});

Fazit

Die Intersection Observer API verwandelt Viewport-Erkennung von einem Performance-Engpass in eine optimierte Browser-Funktion. Durch den Ersatz von Scroll-Event-Listenern mit Intersection Observern eliminieren Sie das Blockieren des Haupt-Threads und erhalten gleichzeitig präzisere Sichtbarkeitskontrolle. Beginnen Sie noch heute mit der Migration Ihres scroll-basierten Sichtbarkeitscodes – die Browser Ihrer Nutzer werden es Ihnen danken.

Häufig gestellte Fragen

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.