Mithilfe dieser API können wir ein Element im DOM "beobachten" und auf den Umstand reagieren, ob das Element sich in den sichtbaren Bereich des Viewports bewegt (z.B. durch scrollen)
+Einfacher gesagt können wir hiermit darauf reagieren, ob ein Element für den Nutzer sichtbar ist oder nicht.
+Dieses Feature hilft uns bei einer Reihe von "alltäglichen" Problemen:
+Um einen IntersectionObserver zu erstellen, müssen wir ein paar Optionen vorbereiten
+ const options = {
+ // Definiert den Bereich in dem das Element sichtbar sein soll
+ // Wenn dieser Wert nicht definiert ist, wird der (Browser) Viewport verwendet
+ root: null,
+ // Hiermit können wir am "beobachteten" Viewport Puffer einrichten
+ // Werte können sowohl positiv als auch negativ werden
+ rootMargin: "0px",
+ // Definiert, wann das "Intersection"-Event gefeuert werden soll
+ // Wert muss zwischen 0 und 1 sein, bei 1 wird das Event nur dann "getriggert"
+ // wenn das Element vollständig im Viewport zu sehen ist.
+ threshold: 1.0,
+ };
+
+ Mit diesen Optionen können wir nun den eigentlichen IntersectionObserver erstellen
+
+ const callback = function(event) {
+ console.log("Element ist nun komplett sichtbar!", event);
+ }
+
+ const observer = new IntersectionObserver(callback, options);
+ Als letzten Schritt müssen wir nun nur noch das gewünschte Objekt "beobachten"
+
+ const observationTarget = document.getElementById('...');
+
+ observer.observe(target);
+ Und das ist es schon! Der Callback wird beim initialisieren normalerweise einmalig ausgeführt, sobald das Element nun den Viewport betritt, und Flächenmäßig den threshold überschreitet, wird der Callback ausgeführt.
+Nun können wir noch an den Optionen eine Kleinigkeit ändern.
+Falls es notwendig ist, können wir auch mehrere Thresholds anlegen um mehrere "Steps" beim hineinscrollen in den Viewport zu überprüfen. Bei jedem threshold im definierten Array wird der Callback aufgerufen.
+
+ const options = {
+ root: null,
+ rootMargin: "0px",
+ // Ruft den Callback bei 25%, 50%, 75%, und 100%
+ // Sichtbarkeit im Viewport auf.
+ threshold: [0.25, 0.5, 0.75, 1],
+ };
+ Der Callback der Aufgerufen wird, meldet sich mit allen Einträgen zurück, die seit dem letzten Aufruf die angegebene (Sichtbarkeits)-Grenze überschritten haben.
+Zusätzlich befindet sich als 2. Parameter der observer der das Element überprüft.
+
+ const callback = function(entries, observer) {
+ entries.forEach((entry) => {
+ // entry.boundingClientRect
+ // entry.intersectionRatio,
+ // entry.intersectionRect,
+ // entry.isIntersecting,
+ // entry.rootBounds,
+ // entry.target,
+ // entry.time
+ });
+ }
+