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 festzulegen, die für die Bereitstellung der Zeitleiste für eine benannte Scroll-Fortschrittszeitleiste-Animation verwendet wird, die durch das Scrollen eines scrollbaren Elements (Scroller) zwischen oben und unten (oder links und rechts) fortschreitet. scroll-timeline wird auf dem Scroller festgelegt, der die Zeitleiste bereitstellen wird. Weitere Informationen finden Sie unter CSS scroll-gesteuerte Animationen.

Hinweis: Wenn das Scroller-Element in der Achsendimension seinen Container nicht überlappt oder wenn der Überlauf versteckt oder abgeschnitten ist, wird keine Scroll-Fortschrittszeitleiste erstellt.

Die Eigenschaften scroll-timeline-axis und scroll-timeline-name können auch mithilfe der scroll-timeline Kurzschreibweise festgelegt 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

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

inline

Der Scrollbalken auf der Inline-Achse des Scroller-Elements, welche die Achse in der Richtung parallel zum Textfluss in einer Zeile ist. Für horizontale Schreibrichtungen ist dies dasselbe wie x, während es für vertikale Schreibrichtungen dasselbe wie y ist.

y

Der Scrollbalken auf der vertikalen Achse des Scroller-Elements.

x

Der Scrollbalken 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

Festlegen der Achse der Scroll-Fortschrittszeitleiste

In diesem Beispiel wird eine Scroll-Fortschrittszeitleiste mit dem Namen --myScroller definiert, indem die Eigenschaft scroll-timeline-name auf dem :root-Element (<html>) verwendet wird. Diese Zeitleiste 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 ein horizontaler (nicht standardmäßiger) Scrollbalken verwendet, um die Animation zu steuern.

HTML

Das HTML für das Beispiel ist unten gezeigt.

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

CSS

Das CSS für das Container-Element setzt das :root als Quelle einer Scroll-Fortschrittszeitleiste mit dem Namen --myScroller unter Verwendung der Eigenschaft scroll-timeline-name. Die Scroll-Achse wird mit scroll-timeline-axis: x; (Chromium) und scroll-timeline-axis: horizontal; (Firefox) festgelegt - dies bewirkt, dass die horizontale Scrollbalken-Position die Animation-Zeitleiste bestimmt.

Die Breite des .content-Elements wird auf einen großen Wert gesetzt, um es über das :root-Element hinauslaufen zu lassen.

Auch erwähnenswert ist, dass das .animation-Element die Zeitleiste mit animation-timeline: --myScroller; angewendet hat und außerdem eine animation-duration, 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

Siehe auch