scroll-timeline-axis

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-timeline-axis CSS Eigenschaft wird verwendet, um die Scrollbarrichtung anzugeben, die verwendet wird, um die Timeline für eine benannte Scrollfortschritts-Timeline Animation bereitzustellen, die durch Scrollen eines scrollbaren Elements (Scroller) zwischen oben und unten (oder links und rechts) fortschreitet. scroll-timeline wird auf dem Scroller gesetzt, der die Timeline bereitstellt. Siehe CSS scroll-gesteuerte Animationen für weitere Details.

Hinweis: Wenn das Scroller-Element in der Achsendimension seinen Container nicht überläuft oder wenn der Überlauf verborgen oder abgeschnitten ist, wird keine Scrollfortschritts-Timeline erstellt.

Die Eigenschaften scroll-timeline-axis und scroll-timeline-name können auch mit der Abkürzungseigenschaft scroll-timeline gesetzt werden.

Syntax

css
/* Logical property values */
scroll-timeline-axis: block;
scroll-timeline-axis: inline;
/* Non-logical property values */
scroll-timeline-axis: y;
scroll-timeline-axis: x;

Werte

Erlaubte Werte für scroll-timeline-axis sind:

block

Die Scrollbar auf der Blockachse des Scroller-Elements, die Achse senkrecht zum Textfluss innerhalb einer Zeile. Für horizontale Schreibrichtungen, wie z.B. Standard-Englisch, entspricht dies y, während es für vertikale Schreibrichtungen x entspricht. Dies ist der Standardwert.

inline

Die Scrollbar auf der Inline-Achse des Scroller-Elements, die Achse parallel zum Textfluss in einer Zeile. Für horizontale Schreibrichtungen entspricht dies x, während es für vertikale Schreibrichtungen y entspricht.

y

Die Scrollbar auf der vertikalen Achse des Scroller-Elements.

x

Die Scrollbar auf der horizontalen Achse des Scroller-Elements.

Formale Definition

Anfangswertblock
Anwendbar aufScrollcontainer
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

scroll-timeline-axis = 
[ block | inline | x | y ]#

Beispiele

Definieren der Achse der Scrollfortschritts-Timeline

In diesem Beispiel wird eine Scrollfortschritts-Timeline namens --myScroller definiert, indem die Eigenschaft scroll-timeline-name auf dem :root-Element (<html>) verwendet wird. Diese Timeline wird dann auf die Animation des Elements mit der Klasse animation angewendet, indem animation-timeline: --myScroller verwendet wird.

Um die Wirkung von scroll-timeline-axis zu demonstrieren, wird in diesem Beispiel eine horizontale (nicht standardmäßige) Scrollbar verwendet, um die Animation zu steuern.

HTML

Das HTML für das Beispiel wird unten gezeigt.

html
<body>
  <div class="content"></div>
  <div class="box animation"></div>
</body>

CSS

Das CSS für den Container setzt das :root als Quelle einer Scrollfortschritts-Timeline namens --myScroller unter Verwendung der Eigenschaft scroll-timeline-name. Die Scrollachse wird mit scroll-timeline-axis: x; (Chromium) und scroll-timeline-axis: horizontal; (Firefox) eingestellt — dies bewirkt, dass die horizontale Scrollbar-Position die Animations-Timeline bestimmt.

Die Breite des .content-Elements wird auf einen hohen Wert gesetzt, damit es das :root-Element überläuft.

Außerdem ist zu beachten, dass das .animation-Element die Timeline mit animation-timeline: --myScroller; zugewiesen hat und auch eine animation-duration angewendet hat, damit das Beispiel in Firefox funktioniert.

css
:root {
  scroll-timeline-name: --myScroller;

  /* 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: --myScroller;
  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 unten, um zu sehen, wie das Quadrat animiert wird, während Sie scrollen.

Spezifikationen

Specification
Scroll-driven Animations
# propdef-scroll-timeline-axis

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-timeline-axis
Experimental
block
Experimental
inline
Experimental
x
Experimental
y
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