Mit dieser overflow-anchorEigenschaft können wir die Bildlaufverankerung deaktivieren. Hierbei handelt es sich um eine Browserfunktion, mit der Inhalte über den aktuellen DOM-Speicherort des Benutzers geladen werden können, ohne den Speicherort des Benutzers zu ändern, sobald diese Inhalte vollständig geladen wurden.
Warum wir es brauchen
Die Bildlaufverankerung ist eine Browserfunktion, mit der versucht wird, eine häufige Situation zu verhindern, in der Sie eine Webseite nach unten scrollen können, bevor das DOM vollständig geladen wurde. Wenn dies der Fall ist, werden Sie von Elementen, die über Ihrem aktuellen Speicherort geladen werden, weiter nach unten verschoben.
Es macht Sinn, warum dies passieren würde. Es gibt CSS-Eigenschaften, die wir auf Elemente anwenden, die ihnen Größe (z. B. width), Form (z. B. transform) und Position (z margin. B. ) geben. Wenn diese Elemente zum Zeitpunkt des Bildlaufs auf der Seite noch nicht geladen wurden, lädt das DOM sie weiterhin, obwohl sie sich außerhalb unseres aktuellen Ansichtsfensters befinden, und wird physisch erweitert, um Platz für diese frisch geladenen Elemente zu schaffen. Wenn das DOM wächst, ändert sich unsere Position auf der Seite, um diese Elemente zu berücksichtigen.
Die Bildlaufverankerung verhindert das "Springen", indem die Position des Benutzers auf der Seite gesperrt wird, während Änderungen im DOM über dem aktuellen Speicherort vorgenommen werden. Auf diese Weise kann der Benutzer auch dann auf der Seite verankert bleiben, wenn neue Elemente in das DOM geladen werden.
Mit dieser overflow-anchorEigenschaft können wir die Scroll-Verankerungsfunktion deaktivieren, falls der Inhalt beim Laden von Elementen bevorzugt neu fließen soll.
Syntax
article ( overflow-anchor: (auto | none ); )Werte
Die overflow-anchorEigenschaft akzeptiert zwei Werte, die im Wesentlichen umschalten, ob die Funktion aktiviert ist oder nicht.
auto(Standard): Aktiviert die Bildlaufverankerung für den Teil der Seite oder des Elements, auf den sie angewendet wird.none: Deaktiviert die Bildlaufverankerung in einem Teil oder der gesamten Webseite oder schließt Teile des DOM von der Verankerung aus, sodass der Inhalt erneut fließen kann.
Sie würden dies wahrscheinlich auf das anwenden body, aber Sie können es auf jeden Selektor anwenden , und es wird wirksam, wenn dieses Element einen Bildlauf durchführt.
Demo
In dieser Demo werden, sobald Sie in eines der Felder scrollen, oben in diesem Bereich eine Reihe grüner Felder hinzugefügt. Normalerweise würde dies den Inhalt sofort nach unten drücken, was möglicherweise eine große Ablenkung darstellt und Ihren Platz im Text verliert. Mit overflow-anchor: auto;bleibt der Bildlaufplatz erhalten. overflow-anchor: none;Ermöglicht es den neu eingefügten Divs, die Bildlaufposition zu beeinflussen.
Siehe den Stiftüberlaufanker von Chris Coyier (@chriscoyier) auf CodePen.
Eine andere Möglichkeit, die sehr nützlich sein kann, besteht darin, die Bildlaufposition eines Elements unten anzuheften. So beispielsweise eine Chat-App, bei der neue Nachrichten unten an das DOM angehängt werden und die Bildlaufposition unten bleiben soll, um alle neuen Nachrichten anzuzeigen:
Sehen Sie, wie der Stift
"Stay at the bottom" mit dem Scroll-Anker von Chris Coyier (@chriscoyier)
auf CodePen scrollt.
Browser-Unterstützung
Zum overflow-anchorjetzigen Zeitpunkt handelt es sich nicht um einen aktuellen W3C-Standard, obwohl der Berichtsentwurf der vorgeschlagenen Spezifikation zum Lesen verfügbar ist und seit Version 56 von Chrome übernommen wurde. Mozilla erwägt eine ähnliche Funktion in Firefox. Da immer mehr Browser die Scroll-Verankerungsfunktion verwenden, wird möglicherweise mehr Browserunterstützung erwartet, overflow-anchorda sie die Funktion zum Deaktivieren der Funktion explizit steuert.
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 56 | 66 | Nein | 79 | Nein |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nein |
Mehr Informationen
- Scroll-Verankerung: Vorgeschlagener Entwurf der Scroll-Verankerungsspezifikation
- Chromium-Blog: Der Blog-Beitrag, in dem die Aufnahme von Scroll Anchoring und der CSS-Eigenschaft durch Chrome in Version 56 angekündigt wird
- Bugzilla Ticket # 43114: Öffnen Sie das Ticket, um die Eigenschaft in Firefox aufzunehmen