scroll-timeline-axis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die scroll-timeline-axis CSS Eigenschaft wird verwendet, um die Richtung des Scrollbalkens anzugeben, die genutzt wird, um eine Zeitleiste für eine benannte Fortschrittszeitleisten-Animation bereitzustellen, die durch das Scrollen eines scrollbaren Elements (Scroller) zwischen oben und unten (oder links und rechts) voranschreitet. scroll-timeline wird auf dem Scroller gesetzt, der die Zeitleiste bereitstellt. Weitere Details finden Sie in den CSS scroll-gesteuerten Animationen.
Hinweis: Wenn das Scroller-Element in der Achsendimension nicht seinen Container überläuft oder wenn das Überlaufen versteckt oder abgeschnitten ist, wird keine Fortschrittszeitleiste für das Scrollen erstellt.
Die Eigenschaften scroll-timeline-axis und scroll-timeline-name können auch mit der scroll-timeline Kurzschreibweise gesetzt werden.
Syntax
/* Logical property values */ scroll-timeline-axis: block; scroll-timeline-axis: inline; /* Non-logical property values */ scroll-timeline-axis: y; scroll-timeline-axis: x; Werte
Zulässige Werte für scroll-timeline-axis sind:
block-
Der Scrollbalken auf der Blockachse des Scroller-Elements, die Achse in der Richtung senkrecht zum Textfluss innerhalb einer Zeile. Für horizontale Schreibrichtungen wie das standardmäßige Englisch entspricht dies
y, während es für vertikale Schreibrichtungenxentspricht. Dies ist der Standardwert. inline-
Der Scrollbalken auf der Inline-Achse des Scroller-Elements, die Achse in der Richtung parallel zum Fluss des Textes in einer Zeile. Für horizontale Schreibrichtungen entspricht dies
x, während es für vertikale Schreibrichtungenyentspricht. y-
Der Scrollbalken auf der vertikalen Achse des Scroller-Elements.
x-
Der Scrollbalken auf der horizontalen Achse des Scroller-Elements.
Formale Definition
| Anfangswert | block |
|---|---|
| Anwendbar auf | Scrollcontainer |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
scroll-timeline-axis =
[ block | inline | x | y ]#
Beispiele
Definition der Achse der Fortschrittszeitleiste
In diesem Beispiel wird eine Fortschrittszeitleiste namens --my-scroller definiert, indem die Eigenschaft scroll-timeline-name auf dem :root-Element (<html>) verwendet wird. Diese Zeitleiste wird dann auf die Animation auf dem Element mit der Klasse animation angewendet mittels animation-timeline: --my-scroller.
Um den Effekt von scroll-timeline-axis zu demonstrieren, wird in diesem Beispiel ein horizontaler (nicht standardmäßiger) Scrollbalken verwendet, um die Animation zu steuern.
HTML
Der HTML-Code für das Beispiel wird unten gezeigt.
<body> <div class="content"></div> <div class="box animation"></div> </body> CSS
Das CSS für den Container setzt das :root-Element als Quelle einer Fortschrittszeitleiste namens --my-scroller unter Verwendung der scroll-timeline-name Eigenschaft. Die Scrollachse wird mit scroll-timeline-axis: x; (Chromium) und scroll-timeline-axis: horizontal; (Firefox) gesetzt — dies bewirkt, dass die horizontale Scrollbalken-Position die Zeitleiste der Animation bestimmt.
Die Breite des .content-Elements wird auf einen großen Wert gesetzt, um es über das :root-Element hinausfließen zu lassen.
Ebenso ist erwähnenswert, dass das .animation-Element die Zeitleiste mit animation-timeline: --my-scroller; angewendet hat und dass eine animation-duration darauf angewendet wird, damit das Beispiel in Firefox funktioniert.
:root { scroll-timeline-name: --my-scroller; /* Chromium supports the new x/y syntax */ scroll-timeline-axis: x; /* Firefox still supports the old horizontal/vertical syntax */ scroll-timeline-axis: horizontal; } body { margin: 0; overflow-y: hidden; } .content { height: 100vh; width: 2000px; } .box { width: 100px; height: 100px; border-radius: 10px; background-color: rebeccapurple; position: fixed; top: 25px; left: 25px; } .animation { animation: rotate-appear; animation-timeline: --my-scroller; animation-duration: 1ms; /* Firefox requires this to apply the animation */ } @keyframes rotate-appear { from { rotate: 0deg; top: 0%; } to { rotate: 720deg; top: 100%; } } Ergebnis
Scrollen Sie die horizontale Leiste am unteren Rand, um zu sehen, wie das Quadrat animiert wird, während Sie scrollen.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # propdef-scroll-timeline-axis |