overflow-anchor

Die `overflow-anchor`-Eigenschaft ermöglicht es uns, sich vom Scroll Anchoring abzumelden, einer Browserfunktion, die dazu dient, das Laden von Inhalten oberhalb der aktuellen DOM-Position des Benutzers zu ermöglichen, ohne die Position des Benutzers zu ändern, sobald diese Inhalte vollständig geladen sind.

Warum wir es brauchen

Scroll Anchoring ist eine Browserfunktion, die versucht, eine häufig auftretende Situation zu verhindern, bei der man beim Herunterscrollen einer Webseite scrollt, bevor die DOM vollständig geladen ist, und wenn dies geschieht, schieben Elemente, die über der aktuellen Position geladen werden, den Benutzer weiter nach unten auf der Seite.

Es ist sinnvoll, warum dies geschieht. Es gibt CSS-Eigenschaften, die wir auf Elemente anwenden, die ihnen Größe (z. B. `width`), Form (z. B. `transform`) und Position (z. B. `margin`) verleihen. Wenn diese Elemente nicht geladen sind, wenn wir auf der Seite nach unten scrollen, wird die DOM sie weiterhin laden, obwohl sie sich außerhalb unseres aktuellen Viewports befinden, und sie werden sich physisch ausdehnen, um Platz für diese neu geladenen Elemente zu schaffen. Wenn die DOM wächst, ändert sich unsere Position auf der Seite, um diese Elemente unterzubringen.

Scroll Anchoring verhindert dieses „Springen“, indem es die Position des Benutzers auf der Seite sperrt, während Änderungen in der DOM oberhalb der aktuellen Position vorgenommen werden. Dies ermöglicht es dem Benutzer, dort zu bleiben, wo er sich auf der Seite befindet, auch wenn neue Elemente in die DOM geladen werden.

Die `overflow-anchor`-Eigenschaft ermöglicht es uns, uns von der Scroll Anchoring-Funktion abzumelden, falls es bevorzugt wird, dass sich Inhalte beim Laden von Elementen neu anordnen.

Syntax

article {
  overflow-anchor: [auto | none ];
}

Werte

Die `overflow-anchor`-Eigenschaft akzeptiert zwei Werte, die im Wesentlichen umschalten, ob die Funktion aktiviert ist oder nicht.

• auto (Standard): Aktiviert Scroll Anchoring für den Teil der Seite oder des Elements, auf das es angewendet wird.
• none: Deaktiviert Scroll Anchoring für einen Teil oder die gesamte Webseite oder schließt Teile der DOM vom Ankern aus, sodass sich Inhalte neu anordnen können.

Sie würden dies wahrscheinlich auf `body` anwenden, aber Sie können es auf jeden Selektor anwenden, und es wird wirksam, wenn dieses Element scrollt.

Demo

In dieser Demo wird, sobald Sie in einer der Boxen scrollen, eine Reihe von grünen Boxen oben in diesem Div hinzugefügt. Normalerweise würde dies den Inhalt sofort nach unten verschieben, was eine große Ablenkung darstellen und Ihren Platz im Text verlieren könnte. Mit `overflow-anchor: auto;` wird die Scroll-Position beibehalten. `overflow-anchor: none;` erlaubt, dass die neu eingefügten Divs die Scroll-Position beeinflussen.

Siehe den Pen overflow-anchor von Chris Coyier (@chriscoyier) auf CodePen.

Eine weitere nützliche Funktion ist das Fixieren der Scroll-Position eines Elements am unteren Rand. Zum Beispiel eine Chat-App, bei der neue Nachrichten am unteren Rand der DOM angehängt werden und Sie möchten, dass die Scroll-Position unten bleibt, um alle neuen Nachrichten anzuzeigen.

Siehe den Pen
"Unten bleiben" Scrolling mit Scroll-Anchor von Chris Coyier (@chriscoyier)
auf CodePen.

Browser-Unterstützung

Zum Zeitpunkt der Erstellung ist `overflow-anchor` kein aktueller W3C-Standard, obwohl der Entwurfsbericht der vorgeschlagenen Spezifikation gelesen werden kann und seit Version 56 von Chrome übernommen wurde. Mozilla erwägt eine ähnliche Funktion in Firefox. Da mehr Browser die Scroll Anchoring-Funktion übernehmen, können wir mit mehr Browserunterstützung für `overflow-anchor` rechnen, da sie explizite Kontrolle zum Abmelden von der Funktion bietet.

Weitere Informationen

• Scroll Anchoring: Entwurfsentwurf der Scroll Anchoring-Spezifikation
• Chromium Blog: Der Blogbeitrag, der die Aufnahme von Scroll Anchoring und der CSS-Eigenschaft in Version 56 von Chrome ankündigt
• Bugzilla Ticket #43114: Offenes Ticket zur Aufnahme der Eigenschaft in Firefox