Ãbersicht über das Scroll-Anchoring
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Als Webbenutzer sind Sie wahrscheinlich mit dem Problem vertraut, das durch Scroll-Anchoring gelöst wird. Sie rufen eine lange Seite bei langsamer Verbindung auf und beginnen zu scrollen, um den Inhalt zu lesen; während Sie beschäftigt sind zu lesen, springt der Teil der Seite, den Sie gerade ansehen, plötzlich. Dies geschieht, weil groÃe Bilder oder andere Elemente weiter oben im Inhalt geladen wurden.
Scroll-Anchoring ist eine Browser-Funktion, die dieses Problem des Springens von Inhalten lösen soll, welches auftritt, wenn Inhalt geladen wird, nachdem der Nutzer bereits zu einem neuen Teil des Dokuments gescrollt hat.
Wie funktioniert es?
Scroll-Anchoring passt die Scroll-Position an, um Ãnderungen auÃerhalb des Viewports auszugleichen. Dies bedeutet, dass der Punkt im Dokument, den der Nutzer betrachtet, im Viewport bleibt, was tatsächlich bedeuten kann, dass sich die Scroll-Position in Bezug darauf, wie weit sie sich durch das Dokument bewegt haben, ändert.
Wie schalte ich Scroll-Anchoring ein?
Das müssen Sie nicht! Die Funktion ist in unterstützenden Browsern standardmäÃig aktiviert. In den meisten Fällen ist verankertes Scrollen genau das, was Sie wollen â springende Inhalte sind eine schlechte Erfahrung für jeden.
Was, wenn ich es debuggen muss?
Wenn sich Ihre Seite mit aktiviertem Scroll-Anchoring nicht richtig verhält, liegt das wahrscheinlich daran, dass ein scroll-Ereignis-Listener das zusätzliche Scrollen zum Ausgleich der Anchor-Node-Bewegung nicht korrekt handhabt.
Sie können in Firefox überprüfen, ob das Deaktivieren von Scroll-Anchoring das Problem behebt, indem Sie layout.css.scroll-anchoring.enabled in about:config auf false setzen. AuÃerdem können Sie mit dem layout.css.scroll-anchoring.highlight Schalter überprüfen, welches Knoten Firefox als Anker verwendet. Dies zeigt eine lila Ãberlagerung über dem Anker-Knoten an.
Wenn ein Knoten nicht als geeigneter Anker erscheint, können Sie ihn mit overflow-anchor ausschlieÃen, wie unten beschrieben.
Was, wenn ich es deaktivieren muss?
Das CSS Scroll-Anchoring-Modul bietet die overflow-anchor-Eigenschaft, mit der das Scroll-Anchoring für das gesamte Dokument oder Teile davon deaktiviert werden kann. Im Wesentlichen handelt es sich um eine Möglichkeit, sich gegen das Verhalten zu entscheiden.
Die einzigen möglichen Werte sind auto oder none:
autoist der Anfangswert; solange der Browser des Benutzers Scroll-Anchoring unterstützt, tritt das Verhalten auf, und sie sollten weniger Inhaltssprünge sehen.nonebedeutet, dass Sie ausdrücklich beschlossen haben, das Dokument oder Teile davon vom Scroll-Anchoring auszuschlieÃen.
Um das gesamte Dokument auszuschlieÃen, können Sie es auf das <body>-Element setzen:
body {
overflow-anchor: none;
}
Um das Scroll-Anchoring für einen Abschnitt des Dokuments auszuschlieÃen, setzen Sie overflow-anchor: none auf das Containerelement des Abschnitts:
.container {
overflow-anchor: none;
}
Wenn Sie das Scroll-Anchoring im Dokument oder einem Abschnitt davon ausschlieÃen, kann ein Nachfahre eines ausgeschlossenen Bereichs nicht wieder eingeschlossen werden. Beispielsweise, wenn Sie das gesamte Dokument ausschlieÃen, können Sie overflow-anchor: auto nicht auf einem Nachfahren-Knoten setzen, um das Scroll-Anchoring für einen Unterabschnitt wieder einzuschalten.
Unterdrückungsauslöser
Es gibt einige Unterdrückungsauslöser, die Scroll-Anchoring an Orten deaktivieren, an denen es problematisch sein könnte. Wenn einer der Auslöser auf dem Anker-Knoten oder einem seiner Vorfahren auftritt, wird das Anchoring unterdrückt.
Diese Unterdrückungsauslöser sind Ãnderungen am berechneten Wert der folgenden Eigenschaften:
top,left,right, oderbottommarginoderpadding- Alle
width- oderheight-bezogenen Eigenschaften transformund die einzelnen Transformations-Eigenschaftentranslate,scale, undrotate
AuÃerdem deaktivieren Ãnderungen von position innerhalb des Scroll-Containers ebenfalls das Scroll-Anchoring.
Spezifikationen
| Spezifikation |
|---|
| CSS Scroll Anchoring Module Level 1 # exclusion-api |
Browser-Kompatibilität
Um Stile bedingt anzuwenden, basierend darauf, ob Scroll-Anchoring deaktiviert werden kann, verwenden Sie @supports-Feature-Abfragen, um die Unterstützung für die overflow-anchor-Eigenschaft zu testen.
Siehe auch
- Originale Scroll-Anchoring-Erklärung über WICG (2016)
- Scroll-Anchoring für Webentwickler über Chromium (2017)