JavaScript Academy · Lektion

Sichtbarkeit von Elementen beobachten

Erstellen Sie einen Observer und beobachten Sie Elemente.

Sichtbarkeit von Elementen beobachten ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Intersection Observer

Traditionell musste man, um festzustellen, wann ein Element in den Viewport gelangt, auf scroll lauschen und ständig getBoundingClientRect aufrufen. Das ist langsam und ruckelig.

Die Intersection Observer API überwacht die Sichtbarkeit effizient und asynchron außerhalb des Hauptthreads.

Einen Observer erstellen

Sie erstellen einen Observer mit new IntersectionObserver(callback). Der Callback wird ausgeführt, sobald die Sichtbarkeit eines überwachten Elements einen Schwellenwert überschreitet.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

Ein Element beobachten

Rufen Sie observer.observe(element) auf, um die Überwachung eines Ziels zu starten. Ein Observer kann viele Elemente überwachen.

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

Das isIntersecting-Flag

Jeder Eintrag besitzt ein boolesches isIntersecting, das angibt, ob das Ziel derzeit den Root überlappt, standardmäßig den Viewport.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

Details zum Eintrag

Jeder IntersectionObserverEntry enthält nützliche Daten:

target — das überwachte Element
isIntersecting — ob es den Root überlappt
intersectionRatio — wie viel davon sichtbar ist (0 bis 1)
boundingClientRect — das Rechteck des Ziels

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

Die threshold-Option

Die Option threshold legt fest, bei welchen Sichtbarkeitsverhältnissen der Callback ausgelöst wird. Bei 0 wird er aufgerufen, sobald ein Pixel sichtbar ist; bei 1 nur, wenn das Element vollständig sichtbar ist.

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

Die root-Option

Standardmäßig misst der Observer relativ zum Ansichtsfenster des Browsers. Setzen Sie root auf ein scrollbares übergeordnetes Element, um die Sichtbarkeit stattdessen innerhalb dieses Containers zu messen.

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

Die rootMargin-Option

rootMargin vergrößert oder verkleinert den Begrenzungsrahmen von root, ähnlich wie CSS-Margins. Positive Werte lösen den Callback früher aus, also bevor das Element tatsächlich auf dem Bildschirm zu sehen ist.

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

Beobachtung beenden

Rufen Sie observer.unobserve(element) auf, um ein einzelnes Element nicht mehr zu beobachten, oder observer.disconnect(), um die Beobachtung aller Elemente zu beenden. Das ist wichtig für die Bereinigung und für einmalige Auslöser.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

Warum es effizient ist

Der Browser berechnet Überschneidungen intern und bündelt Benachrichtigungen, anstatt Ihr JavaScript bei jedem Scroll-Frame auszuführen. Dadurch wird Layout-Thrashing vermieden und das Scrollen bleibt auch bei vielen Zielen flüssig.

Häufige Anwendungsfälle

Der Intersection Observer ermöglicht viele Funktionen aus der Praxis:

Bilder und Iframes verzögert laden
Unendliches Scrollen
Durch Scrollen ausgelöste Animationen
Ad- oder Content-Impressionen erfassen

Als Nächstes implementieren wir mehrere davon.

Schnelltest

Testen Sie Ihr Verständnis der Grundlagen des Intersection Observers.

Zusammenfassung

Sie haben die Grundlagen des Intersection Observers gelernt:

new IntersectionObserver(callback, options) erstellt einen Observer.
observe startet die Beobachtung; unobserve/disconnect beendet sie.
Jeder Eintrag stellt isIntersecting und intersectionRatio bereit.
threshold, root und rootMargin legen fest, wann der Callback ausgelöst wird.
Der Ansatz ist wesentlich effizienter als Scroll-Listener.

Als Nächstes laden wir damit Bilder verzögert.

Häufig gestellte Fragen

Ist die Lektion „Sichtbarkeit von Elementen beobachten“ kostenlos?

Ja — der vollständige Text von „Sichtbarkeit von Elementen beobachten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Sichtbarkeit von Elementen beobachten“?

Erstellen Sie einen Observer und beobachten Sie Elemente. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Sichtbarkeit von Elementen beobachten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy