Baseline Widely available
Die observe() Methode des IntersectionObserver Interfaces fügt ein Element zur Menge der vom IntersectionObserver überwachten Zielelemente hinzu. Ein Observer hat einen Schwellenwertsatz und eine Wurzel, kann aber mehrere Zielelemente in Bezug auf Sichtbarkeitsänderungen überwachen.
Um die Beobachtung des Elements zu stoppen, rufen Sie IntersectionObserver.unobserve() auf.
Wenn die Sichtbarkeit des angegebenen Elements eine der Sichtbarkeitsschwellen des Observers (wie in IntersectionObserver.thresholds aufgelistet) überschreitet, wird der Callback des Observers mit einem Array von IntersectionObserverEntry Objekten ausgeführt, die die aufgetretenen Schnittänderungen darstellen. Es ist zu beachten, dass dieses Design es ermöglicht, die Schnittänderungen mehrerer Elemente durch einen einzigen Aufruf des Callbacks zu verarbeiten.
Hinweis: Der Callback des Observers wird immer im ersten Render-Zyklus nach dem Aufruf von observe() ausgelöst, selbst wenn sich das beobachtete Element in Bezug auf das Ansichtsfenster noch nicht bewegt hat. Das bedeutet, dass zum Beispiel ein Element, das sich auÃerhalb des Ansichtsfensters befindet, wenn observe() darauf angewendet wird, sofort den Callback mit mindestens einem Eintrag aufruft, bei dem intersecting auf false gesetzt ist. Ein Element innerhalb des Ansichtsfensters führt dazu, dass der Callback sofort mit mindestens einem Eintrag aufgerufen wird, bei dem intersecting auf true gesetzt ist.
targetElement
Ein element, dessen Sichtbarkeit innerhalb der Wurzel überwacht werden soll. Dieses Element muss ein Nachkomme des Wurzelelements sein (oder innerhalb des aktuellen Dokuments enthalten sein, wenn die Wurzel das Ansichtsfenster des Dokuments ist).
Keiner (undefined).
// 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);
});
Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4