`scroll-timeline-axis` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die scroll-timeline-axis CSS Eigenschaft wird verwendet, um die Richtung des Scrollbalkens anzugeben, die verwendet wird, um die Zeitleiste für eine scrollgesteuerte Animation bereitzustellen. Diese wird durch das Scrollen eines scrollbaren Elements (Scroller) vorangetrieben.

Syntax

css

/* Logical property values */
scroll-timeline-axis: block;
scroll-timeline-axis: inline;

/* Physical property values */
scroll-timeline-axis: y;
scroll-timeline-axis: x;

/* Global values */
scroll-timeline-axis: inherit;
scroll-timeline-axis: initial;
scroll-timeline-axis: revert;
scroll-timeline-axis: revert-layer;
scroll-timeline-axis: unset;

Werte

<axis>: Ein <axis> Schlüsselwortwert, der die Richtung oder Achse des Scrollports beschreibt, die die scrollgesteuerte Animation steuert. Der Standardwert ist block.

Beschreibung

Die scroll-timeline-axis Eigenschaft spezifiziert, welcher Scrollbalken verwendet wird, um die Zeitleiste für eine Scroll-Fortschrittszeitleiste Animation bereitzustellen. Der Wert ist die <axis> des Scrollbalkens. Die scroll-timeline Eigenschaft wird auf dem Scroller gesetzt, der die Zeitleiste bereitstellen wird.

Wenn das Scroller-Element in seiner Achsenrichtung nicht über seinen Container hinausgeht oder wenn das Überlaufverhalten versteckt oder abgeschnitten ist, wird keine Scroll-Fortschrittszeitleiste erstellt.

Die scroll-timeline-axis und scroll-timeline-name Eigenschaften können auch mit der scroll-timeline Kurzform-Eigenschaft gesetzt werden.

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

Definieren der Achse der Scroll-Fortschrittszeitleiste

In diesem Beispiel wird eine Scroll-Fortschrittszeitleiste namens --my-scroller mit der scroll-timeline-name Eigenschaft auf dem :root Element (<html>) definiert. Diese Zeitleiste wird dann auf die Animation des Elements mit der animation Klasse mit animation-timeline: --my-scroller angewendet.

Um die Wirkung von scroll-timeline-axis zu demonstrieren, wird in diesem Beispiel ein horizontaler (nicht standardmäßiger) Scrollbalken verwendet, um die Animation anzutreiben.

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 legt das :root als Quelle für eine Scroll-Fortschrittszeitleiste namens --my-scroller mit der scroll-timeline-name Eigenschaft fest. Die Scrollachse wird mit scroll-timeline-axis: x; gesetzt, wodurch die horizontale Scrollbar-Position die Zeitleiste der Animation bestimmt. Wir fügen auch scroll-timeline-axis: horizontal; für Browser hinzu, die die nicht standardmäßigen, veralteten Werte horizontal und vertical unterstützen, aber nicht x und y.

Die Breite des .content Elements ist auf einen großen Wert gesetzt, damit es über das :root Element hinausgeht.

Das .animation Element hat die Animation mittels der animation Kurzform, und die Scroll-Zeitleiste wird mit der animation-timeline gesetzt.

css

:root {
  scroll-timeline-name: --my-scroller;

  scroll-timeline-axis: x;
  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 1ms linear;
  animation-timeline: --my-scroller;
}

@keyframes rotate-appear {
  from {
    rotate: 0deg;
    top: 0%;
  }

  to {
    rotate: 720deg;
    top: 100%;
  }
}

@layer no-support {
  @supports not (scroll-timeline-axis: block) {
    body::before {
      content: "Your browser doesn't support the `scroll-timeline-axis` property.";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Ergebnis

Scrollen Sie den horizontalen Balken unten, um zu sehen, wie das Quadrat animiert wird, während Sie scrollen.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

scroll-timeline-axis CSS property

HTML

CSS

Ergebnis

Help improve MDN

`scroll-timeline-axis` CSS property