Beobachten von Positionsänderungen von HTML-Elementen mit Intersection Observer

TLDR: Verwendung eines Schnittpunktbeobachters zur Beobachtung der Positionsänderung von Elementen, ohne auf Scroll-Ereignisse oder kontinuierliche Abfragen zu hören.

Demo:

https://ajk-essential.github.io/Position-Observer/

Github-Repo:

https://github.com/AJK-Essential/Position-Observer

Motivation:

Um zu beobachten, wann sich ein Element innerhalb eines Ansichtsfensters bewegt, müssen wir uns traditionell darauf verlassen, Scroll-Ereignisse der übergeordneten Elemente des HTML-Elements abzuhören oder kontinuierliche Abfragemethoden wie die Verwendung von requestanimationframe zu verwenden.

Das funktioniert…. könnte aber besser sein...

Da das Abhören von Scroll-Ereignissen zu Leistungsverzögerungen führen kann.
Und die kontinuierliche Abfrage läuft immer im Hintergrund … was die CPU belasten kann, selbst wenn sich das Zielelement nicht bewegt.

Dies ist also ein Ansatz/ein Experiment, um zu sehen, ob wir mit dem Intersection Observer etwas tun können, um Positionsänderungen von HTML-Elementen zu beobachten.

Der Ansatz:

Schnittpunktbeobachter können sehr gut melden, ob sich das Zielelement tatsächlich mit einem Wurzelelement schneidet. Sie können Bruchteilsänderungen der Schnittmenge zwischen dem Zielelement und dem Stammelement melden, die auftreten, wenn sich das Zielelement bewegt.

Wir haben auch die Möglichkeit, die Abmessungen des Erfassungsfensters (die Stammgrenzen) zu ändern, indem wir die Ränder der Stammgrenzen ändern.

Hmm…

Die Idee:

Die Idee besteht also darin, das Erfassungsfenster zu nutzen, um das Ziel eng zu umschließen. Das heißt, wenn sich das Zielelement bewegt, trifft es auf das Erfassungsfenster und schneidet es. Daher meldet der Intersection Observer die winzigen Schnittpunkte mithilfe eines Arrays mit hohem Schwellenwert (von 0 bis 1 in Teilungen von 1/1000stel). Das bedeutet, dass der Intersection Observer alle 1/1000stel Änderungen im Schnittbereich zwischen dem Ziel und der Wurzel (dem Erfassungsfenster) meldet

Wenn es sich vollständig aus dem Aufnahmefenster bewegt (dies geschieht, wenn das Schnittverhältnis 0 ist), dann ändern wir die Ränder der Wurzel (des Aufnahmefensters) erneut so, dass sie etwa an der neuen Zielposition liegen.

Implementierungsproblem, mit dem ich konfrontiert war, und wie es jetzt gelöst wird:

Der Ansatz funktionierte gut, bis ich auf Scroll-Situationen stieß, in denen sich das Ziel innerhalb der visuellen Ansichtsfensterdimensionen (innerhalb des Bildschirms) befand, aber visuell verborgen war, da es im Scroll-Kontext verborgen war.

In diesem Szenario war das Kreuzungsverhältnis immer 0, da die Kreuzung nur gemeldet wurde, wenn sich das Ziel innerhalb des Sichtbereichs befand.

Um dieses Problem zu lösen, habe ich diesen Ansatz gewählt.

Wenn das Schnittverhältnis 0 beträgt...
Der Kreuzungsbeobachter wird getrennt und dann mit neuen Einstellungen wieder verbunden:
 
Die Abmessungen des Erfassungsfensters entsprechen dem gesamten Bildschirm (d. h. mit Stammrändern von 0).

Und der Rückruf für dieses Szenario erfolgt in einer anderen Methode, um zwischen den Momenten zu unterscheiden, in denen die Stammgrenzen das visuelle Ansichtsfenster sind, und denen, in denen sie sich gerade um das Ziel herum befinden.

Wenn der Intersection Observer nun ein Kreuzungsverhältnis von weniger als 1 meldet, unternehmen wir nichts. Bei jedem Bericht sagen wir, dass es eine Positionsänderung gibt. 

Wenn das Verhältnis 1 beträgt, bedeutet dies, dass sich das Ziel vollständig im Sichtbereich befindet. In diesem Moment trennen wir den Intersection Observer erneut und verbinden uns wieder mit einem feineren Fenster um das Ziel herum mit der vorherigen Rückrufmethode.

Das Erfassungsfenster (rootBounds) wechselt also letztendlich zwischen dem feineren Fenster und dem visuellen Ansichtsfenster.

Wie implementiert man es? Ist dies bereits implementiert?

Ja. Ich habe dasselbe als PositionObserver-Klasse in meinem Github-Repo (https://github.com/AJK-Essential/Position-Observer) implementiert. Die Dateien befinden sich im dist-Ordner. Diese Dateien können heruntergeladen werden.

Dann
Die PositionObserver-Klasse kann wie folgt importiert werden:

import { PositionObserver } from "./position-observer.js";

Dann erstellen Sie eine Instanz dieses PositionObservers wie folgt:

const positionObs = new PositionObserver(posObsCallback);

wobei posObsCallback eine beliebige Funktion ist, die einen Objektparameter vom Typ akzeptiert:

 {
  x: number;
  y: number;
  target: HTMLElement | Element;
  outOfViewport: boolean;
  rootBounds: DOMRect | null;
};

Dies wäre die Funktion, die als Rückruf aufgerufen würde, wenn der positionObserver eine Positionsänderung erkennt. Die Parameter:

• x : stellt die x-Koordinate des Ziels dar
• y : stellt die y-Koordinate des Ziels dar
• Ziel: stellt das Ziel selbst dar
• outOfViewport: stellt dar, ob das Ziel den visuellen Bereich des Ansichtsfensters verlassen hat
• rootBounds: stellt die Grenze des Stammelements oder des Erfassungsfensters dar. Nützlich für Debugging-Zwecke.

Bis jetzt wurde der positionObserver eingerichtet. Um nun eine Positionsänderung eines Elements zu erkennen, müssen wir es wie folgt beobachten:

positionObs.observe(target);

wobei Ziel das tatsächliche Element darstellt, das wir beobachten möchten.
Um die Beobachtung von Positionsänderungen zu stoppen, können wir es wie folgt verwenden:

positionObs.disconnect()

Sie können auch https://github.com/AJK-Essential/Position-Observer/blob/main/docs/target-scroll.html besuchen und sich den Skriptabschnitt ansehen, um eine Beispielimplementierung zu sehen

Einschränkungen dieses Beobachters:

1. Positionsänderungen können nur erkannt werden, wenn sich das Ziel innerhalb des Sichtbereichs bewegt.
2. Wenn sich die Größe des Ansichtsfensters oder des Ziels ändert, kann es zu Fehlern kommen. In solchen Fällen ist es daher besser, die Verbindung zu trennen und das Ziel dann erneut zu beobachten.

Ist das also die perfekte Lösung ?

Ich weiß es nicht. Laut meinen Tests hat es funktioniert. Es kann Situationen geben, in denen es möglicherweise nicht funktioniert ...
Was ich empfehlen würde, ist, dies in Kombination mit dem Abhören des Scrollens zu verwenden (und es nur als Ersatz für kontinuierliche Abfragen zu verwenden), da ich beobachte, dass es beim Scrollen in der Demo manchmal nicht gelingt, das Ziel zu verfolgen.

Fühlen Sie sich frei, den Code in diesem Github-Repo zu verwenden und zu testen
(https://github.com/AJK-Essential/Position-Observer) und ändern Sie es sogar privat, um es an Ihre Projekt-/Geschäftsanforderungen anzupassen oder wenn Sie einen Fehler gefunden haben und auch die Lösung dafür haben.

Ich hoffe, das hat dir geholfen!

Das obige ist der detaillierte Inhalt vonBeobachten von Positionsänderungen von HTML-Elementen mit Intersection Observer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!