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

css
/* 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:

nearest

Der nächstgelegene Vorfahre des aktuellen Elements, der Scrollleisten auf einer der Achsen hat. Dies ist der Standardwert.

root

Das Root-Element des Dokuments.

self

Das aktuelle Element selbst.

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 wie x 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 wie y 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

<scroll()> = 
scroll( [ <scroller> || <axis> ]? )

<scroller> =
root |
nearest |
self

<axis> =
block |
inline |
x |
y

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.

html
<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.

css
#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.

css
#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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll()
Experimental

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.

Siehe auch