Übersicht über das Scroll-Ankern
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Als Webnutzer sind Sie wahrscheinlich mit dem Problem vertraut, das durch das Scroll-Ankern gelöst wird. Sie besuchen eine lange Seite mit einer langsamen Verbindung und beginnen zu scrollen, um den Inhalt zu lesen; während Sie beschäftigt sind, 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.
Das Scroll-Ankern ist eine Browserfunktion, die darauf abzielt, das Problem des Springens von Inhalten zu lösen, das auftritt, wenn Inhalte geladen werden, nachdem der Nutzer bereits zu einem neuen Teil des Dokuments gescrollt hat.
Wie funktioniert es?
Das Scroll-Ankern passt die Scroll-Position an, um die Veränderungen außerhalb des Viewports auszugleichen. Dies bedeutet, dass der Punkt im Dokument, den der Nutzer betrachtet, im Viewport bleibt, was bedeuten kann, dass sich ihre Scroll-Position tatsächlich in Bezug darauf ändert, wie weit sie sich durch das Dokument bewegt haben.
Wie aktiviere ich das Scroll-Ankern?
Das brauchen Sie nicht! Die Funktion ist standardmäßig in unterstützenden Browsern aktiviert. In den meisten Fällen ist verankertes Scrollen genau das, was Sie möchten - das Springen von Inhalten ist für niemanden eine gute Erfahrung.
Was ist, wenn ich es debuggen muss?
Wenn Ihre Seite mit aktiviertem Scroll-Ankern nicht gut funktioniert, liegt es wahrscheinlich daran, dass ein scroll-Ereignislistener das zusätzliche Scrollen nicht korrekt behandelt, um die Bewegung des Ankerknotens auszugleichen.
Sie können überprüfen, ob das Deaktivieren des Scroll-Ankerns das Problem in Firefox behebt, indem Sie layout.css.scroll-anchoring.enabled in about:config auf false setzen. Sie können auch überprüfen, welcher Knoten von Firefox als Anker verwendet wird, indem Sie den layout.css.scroll-anchoring.highlight Schalter verwenden. Dadurch wird ein lila Overlay über dem Ankerknoten angezeigt.
Wenn ein Knoten nicht als geeigneter Anker erscheint, können Sie ihn mit overflow-anchor ausschließen, wie unten beschrieben.
Was ist, wenn ich es deaktivieren muss?
Das CSS-Scroll-Anker-Modul bietet die overflow-anchor-Eigenschaft, die verwendet werden kann, um das Scroll-Ankern im gesamten oder in Teilen des Dokuments zu deaktivieren. Es ist im Wesentlichen eine Möglichkeit, sich gegen das Verhalten zu entscheiden.
Die einzigen möglichen Werte sind auto oder none:
autoist der Ausgangswert; solange der Browser des Nutzers das Scroll-Ankern unterstützt, tritt das Verhalten auf, und sie sollten weniger Heimsprünge von Inhalten erleben.nonebedeutet, dass Sie das Dokument oder einen Teil davon ausdrücklich vom Scroll-Ankern ausgeschlossen haben.
Um das gesamte Dokument auszuschließen, können Sie diese Eigenschaft auf dem <body>-Element setzen:
body {
overflow-anchor: none;
}
Um das Scroll-Ankern 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-Ankern für das Dokument oder einen Abschnitt davon deaktivieren, kann ein Nachkomme des ausgeschlossenen Bereichs nicht wieder eingeschlossen werden. Wenn Sie beispielsweise das gesamte Dokument ausschließen, können Sie keinen Nachkommenknoten mit overflow-anchor: auto versehen, um das Scroll-Ankern für einen Unterabschnitt wieder zu aktivieren.
Unterdrückungsauslöser
Es gibt einige Unterdrückungsauslöser, die das Scroll-Ankern in Bereichen deaktivieren, in denen es problematisch sein könnte. Wenn einer der Auslöser am Ankerknoten oder einem seiner Vorfahren auftritt, wird das Ankern unterdrückt.
Diese Unterdrückungsauslöser sind Änderungen am berechneten Wert der folgenden Eigenschaften:
top,left,right, oderbottommarginoderpadding- Alle
widthoderheight-bezogenen Eigenschaften transformund die individuellen Transformationseigenschaftentranslate,scale, undrotate
Zusätzlich deaktivieren Änderungen an position überall innerhalb des Scroll-Containers ebenfalls das Scroll-Ankern.
Spezifikationen
| Specification |
|---|
| CSS Scroll Anchoring Module Level 1 # exclusion-api |
Browser-Kompatibilität
Loading…
Um Styles bedingt anzuwenden, basierend auf der Möglichkeit, das Scroll-Ankern zu deaktivieren, verwenden Sie @supports Feature Queries, um die Unterstützung für die overflow-anchor-Eigenschaft zu testen.
Siehe auch
- Originale Scroll-Anker-Erklärung via WICG (2016)
- Scroll-Ankern für Webentwickler via Chromium (2017)