scroll()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die scroll()
CSS-Funktion kann mit animation-timeline
verwendet werden, um ein scrollbares Element (Scoller) und die Scrollleistenachse anzugeben, die eine anonyme Scroll-Fortschrittszeitleiste zum Animieren des aktuellen Elements bereitstellen. Die Scroll-Fortschrittszeitleiste wird durch Scrollen des Scrollers zwischen oben und unten (oder links und rechts) durchlaufen. Die Position im Scrollbereich wird in einen Prozentsatz des Fortschritts umgewandelt — 0 % am Anfang und 100 % am Ende.
Hinweis: Wenn die angegebene Achse keine Scrollleiste enthält, ist die Animationszeitleiste inaktiv (kein Fortschritt).
Hinweis:
Jede Verwendung von scroll()
entspricht einer eigenen Instanz von ScrollTimeline
in der Web Animations API.
Syntax
/* Function with no parameters set */
animation-timeline: scroll();
/* Values for selecting the scroller element */
animation-timeline: scroll(nearest); /* Default */
animation-timeline: scroll(root);
animation-timeline: scroll(self);
/* Values for selecting the axis */
animation-timeline: scroll(block); /* Default */
animation-timeline: scroll(inline);
animation-timeline: scroll(y);
animation-timeline: scroll(x);
/* Examples that specify scroller and axis */
animation-timeline: scroll(block nearest); /* Default */
animation-timeline: scroll(inline root);
animation-timeline: scroll(x self);
Parameter
- scroller
-
Der Wert zur Angabe des Scrollers, der die Scroll-Fortschrittszeitleiste bereitstellt, kann einer der folgenden sein:
- axis
-
Der Wert der Scrollleistenachse kann einer der folgenden sein:
block
-
Die Scrollleiste auf der Block-Achse des Scrollcontainers, die die Achse in der Richtung senkrecht zum Textfluss in einer Zeile ist. Für horizontale Schreibmodi, wie im Standard-Englisch, ist dies dasselbe wie
y
, während es für vertikale Schreibmodi dasselbe wiex
ist. Dies ist der Standardwert. inline
-
Die Scrollleiste auf der Inline-Achse des Scrollcontainers, die die Achse in der Richtung parallel zum Textfluss in einer Zeile ist. Für horizontale Schreibmodi ist dies dasselbe wie
x
, während es für vertikale Schreibmodi dasselbe wiey
ist. y
-
Die Scrollleiste auf der vertikalen Achse des Scrollcontainers.
x
-
Die Scrollleiste auf der horizontalen Achse des Scrollcontainers.
Hinweis: Die Werte für Scroller und Achse können in beliebiger Reihenfolge angegeben werden.
Formale Syntax
Beispiele
Festlegen einer anonymen Scroll-Fortschrittszeitleiste
In diesem Beispiel wird das Element #square
mithilfe einer anonymen Scroll-Fortschrittszeitleiste animiert, die auf das zu animierende Element mithilfe der scroll()
-Funktion angewendet wird. Die Zeitleiste in diesem speziellen Beispiel wird vom nächstgelegenen übergeordneten Element bereitgestellt, das (irgendeine) Scrollleiste hat, und zwar von der Scrollleiste in Blockrichtung.
HTML
Das HTML für das Beispiel wird unten gezeigt.
<div id="container">
<div id="square"></div>
<div id="stretcher"></div>
</div>
CSS
Das CSS unten definiert ein Quadrat, das sich in alternierenden Richtungen gemäß der durch die Eigenschaft animation-timeline
bereitgestellten Zeitleiste dreht. In diesem Fall wird die Zeitleiste durch scroll(block nearest)
bereitgestellt, was bedeutet, dass sie die Scrollleiste in Blockrichtung des nächstgelegenen übergeordneten Elements auswählt, das Scrollleisten hat; in diesem Fall die vertikale Scrollleiste des "container"-Elements.
Hinweis: block
und nearest
sind tatsächlich die Standardparameterwerte, daher hätten wir einfach scroll()
verwenden können.
#square {
background-color: deeppink;
width: 100px;
height: 100px;
margin-top: 100px;
position: absolute;
bottom: 0;
animation-name: rotateAnimation;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
animation-direction: alternate;
animation-timeline: scroll(block nearest);
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Das CSS für den Container setzt seine Höhe auf 300px und wir setzen den Container auch so, dass eine vertikale Scrollleiste erstellt wird, falls er überläuft. Das "stretcher"-CSS setzt die Blockhöhe auf 600px, was das Container-Element zwingt, überzulaufen. Diese beiden zusammen stellen sicher, dass der Container eine vertikale Scrollleiste hat, die als Quelle der anonymen Scroll-Fortschrittszeitleiste verwendet werden kann.
#container {
height: 300px;
overflow-y: scroll;
position: relative;
}
#stretcher {
height: 600px;
}
Ergebnis
Scrollen Sie, um zu sehen, wie das Quadratelement animiert wird.
Spezifikationen
Specification |
---|
Scroll-driven Animations # scroll-notation |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scroll() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- User must explicitly enable this feature.