IntersectionObserver: rootMargin-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2019.
Die schreibgeschützte rootMargin-Eigenschaft des IntersectionObserver-Interfaces ist ein String mit einer Syntax, die der der CSS-margin-Eigenschaft ähnlich ist.
Jede Seite des Rechtecks, das durch rootMargin dargestellt wird, wird zur entsprechenden Seite im Begrenzungsrahmen des root-Elements hinzugefügt, bevor der Schnittpunkttest durchgeführt wird. Dies ermöglicht Ihnen beispielsweise, die Grenzen nach außen anzupassen, sodass das Zielelement als 100% sichtbar angesehen wird, selbst wenn eine bestimmte Anzahl von Pixeln in Breite oder Höhe abgeschnitten wird, oder das Ziel als teilweise verdeckt zu behandeln, wenn ein Rand zu nahe am Rand des Begrenzungsrahmens des Roots liegt.
Sehen Sie wie Schnittpunkte berechnet werden für einen detaillierteren Blick auf die Root-Margin und wie sie mit dem Begrenzungsrahmen des Roots funktioniert.
Wert
Ein String, ähnlich formatiert wie der Wert der CSS-margin-Eigenschaft, der Offsets für eine oder mehrere Seiten des Begrenzungsrahmens des Roots enthält. Diese Offsets werden zu den entsprechenden Werten im Begrenzungsrahmen des Roots hinzugefügt, bevor der Schnittpunkt zwischen dem resultierenden Rechteck und den Grenzen des Zielelements berechnet wird.
Der von dieser Eigenschaft zurückgegebene String muss möglicherweise nicht mit dem übereinstimmen, der bei der Instanziierung des IntersectionObserver angegeben wurde. Zum Beispiel enthält das Ergebnis immer vier Komponenten, obwohl die Eingabe weniger haben könnte.
Wenn rootMargin bei der Instanziierung des Objekts nicht angegeben ist, wird standardmäßig der String "0px 0px 0px 0px" verwendet, was bedeutet, dass der Schnittpunkt zwischen dem unveränderten Begrenzungsrechteck des Root-Elements und den Grenzen des Ziels berechnet wird. Wie Schnittpunkte berechnet werden beschreibt, wie die rootMargin im Detail verwendet wird.
Spezifikationen
| Specification |
|---|
| Intersection Observer # dom-intersectionobserver-rootmargin |
Browser-Kompatibilität
Loading…