IntersectionObserver: observe() Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.
Die Methode IntersectionObserver
observe() fügt ein Element zur Menge der durch den IntersectionObserver
überwachten Ziel-Elemente hinzu. Ein Observer hat eine Menge von Schwellenwerten
und eine Root, kann aber mehrere Ziel-Elemente auf Sichtbarkeitsänderungen beobachten,
die mit diesen übereinstimmen.
Um die Beobachtung des Elements zu stoppen, rufen Sie
IntersectionObserver.unobserve() auf.
Wenn die Sichtbarkeit des angegebenen Elements eine der Sichtbarkeits-Schwellenwerte
des Observers überschreitet (wie in IntersectionObserver.thresholds
aufgeführt), wird der Callback des Observers mit einem Array von
IntersectionObserverEntry-Objekten ausgeführt, die die
stattgefundenen Schnittänderungen darstellen. Beachten Sie, dass dieses Design es
ermöglicht, Schnittänderungen mehrerer Elemente durch einen einzigen Aufruf des
Callbacks zu verarbeiten.
Hinweis:
Der Beobachter Callback wird immer im ersten Render-Zyklus ausgelöst, nachdem observe() aufgerufen wird, auch wenn sich das beobachtete Element noch nicht im Verhältnis zum Viewport bewegt hat.
Dies bedeutet, dass beispielsweise ein Element, das außerhalb des Viewports ist, wenn observe() darauf aufgerufen wird, dazu führt, dass der Callback sofort mit mindestens einem Eintrag aufgerufen wird, bei dem intersecting auf false gesetzt ist.
Ein Element innerhalb des Viewports führt dazu, dass der Callback sofort mit mindestens einem Eintrag aufgerufen wird, bei dem intersecting auf true gesetzt ist.
Syntax
observe(targetElement)
Parameter
targetElement-
Ein
Element, dessen Sichtbarkeit innerhalb der Root überwacht werden soll. Dieses Element muss ein Nachfahre des Root-Elements sein (oder im aktuellen Dokument enthalten sein, wenn die Root der Viewport des Dokuments ist).
Rückgabewert
Keiner (undefined).
Beispiele
// Register IntersectionObserver
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
// Add 'active' class if observation target is inside viewport
entry.target.classList.add("active");
} else {
// Remove 'active' class otherwise
entry.target.classList.remove("active");
}
});
});
// Declares what to observe, and observes its properties.
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
io.observe(el);
});
Spezifikationen
| Specification |
|---|
| Intersection Observer # dom-intersectionobserver-observe |
Browser-Kompatibilität
BCD tables only load in the browser