scroll()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die scroll() CSS-Funktion kann mit der animation-timeline-Eigenschaft verwendet werden, um eine anonyme Scroll-Fortschritt-Timeline zu erstellen, die den Scroller und die Achse der Timeline definiert.

Syntax

css

/* No arguments */
animation-timeline: scroll();

/* <scroller> argument only */
animation-timeline: scroll(nearest);
animation-timeline: scroll(root);
animation-timeline: scroll(self);

/*`<axis>` argument only */
animation-timeline: scroll(block);
animation-timeline: scroll(inline);
animation-timeline: scroll(y);
animation-timeline: scroll(x);

/* <scroller> and <axis> */
animation-timeline: scroll(block nearest);
animation-timeline: scroll(inline root);
animation-timeline: scroll(x self);

Parameter

<scroller>

Das Scroller-Element, das die Scroll-Fortschritt-Timeline bereitstellt. Gültige Werte schließen ein:

nearest: Der nächstgelegene Vorfahre des aktuellen Elements, der auf einer der Achsen Bildlaufleisten hat. Dies ist der Standardwert.
root: Das Wurzelelement des Dokuments.
self: Das aktuelle Element selbst.

<axis>

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

Beschreibung

Die scroll() CSS-Funktion kann als Einzelwert innerhalb der durch Kommas getrennten animation-timeline-Eigenschaft verwendet werden, um eine Scroll-Fortschritt-Timeline für eine @keyframes-Animation anzugeben. Sie definiert das scrollbare Element (scroller) und die Bildlaufleistenachse, die die Animationstimeline bereitstellen wird.

Standardmäßig bezieht sich scroll() auf die block-Achse des nearest Vorfahren-Scrollcontainers. Die Scroller- und Achsenwerte können in beliebiger Reihenfolge angegeben werden.

Die folgenden fünf Deklarationen sind gleichwertig:

css

animation-timeline: scroll();
animation-timeline: scroll(block);
animation-timeline: scroll(nearest);
animation-timeline: scroll(block nearest);
animation-timeline: scroll(nearest block);

Die Scroll-Fortschritt-Timeline wird durch das horizontale oder vertikale Scrollen des Scrollers vorangetrieben, abhängig von der <axis> und dem Schriftsystem. Wenn die angegebene Achse keine Bildlaufleiste enthält, wird die Animationstimeline inaktiv sein.

Formale Syntax

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

<scroller> = 
  root     |
  nearest  |
  self     

<axis> = 
  block   |
  inline  |
  x       |
  y

Beispiele

Eine anonyme Scroll-Fortschritt-Timeline festlegen

In diesem Beispiel wird das #square Element mit einer anonymen Scroll-Fortschritt-Timeline animiert, die auf das zu animierende Element mit der scroll()-Funktion angewendet wird. Die Timeline in diesem speziellen Beispiel wird vom nächstgelegenen Elternelement bereitgestellt, das (eine beliebige) Bildlaufleiste hat, von der Bildlaufleiste in der 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 untenstehende CSS definiert ein Quadrat, das sich in abwechselnden Richtungen entsprechend der durch die animation-timeline-Eigenschaft bereitgestellten Timeline dreht. In diesem Fall wird die Timeline durch scroll(block nearest) bereitgestellt, was bedeutet, dass sie die Bildlaufleiste in der Blockrichtung des nächstgelegenen Vorfahr-Elements auswählt, das Bildlaufleisten hat; in diesem Fall die vertikale Bildlaufleiste des "container"-Elements.

Hinweis: block und nearest sind tatsächlich die Standardparameterwerte, daher könnten wir einfach scroll() verwenden.

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 so, dass er eine vertikale Bildlaufleiste erstellt, wenn er überläuft. Das "stretcher" CSS setzt die Blockhöhe auf 600px, was das Containerelement zum Überlaufen zwingt. Diese beiden zusammen stellen sicher, dass der Container eine vertikale Bildlaufleiste hat, die als Quelle der anonymen Scroll-Fortschritt-Timeline verwendet werden kann.

css

#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#stretcher {
  height: 600px;
}

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

Ergebnis

Scrollen Sie, um das animierte Quadrat-Element zu sehen.

Spezifikationen

Specification
Scroll-driven Animations # scroll-notation

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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