CSS/Funktionen/scroll()

Browserunterstützung
caniuse.com

Die CSS-Funktion scroll() kann zusammen mit animation-timeline verwendet werden, um ein scrollbares Element und eine Scrollbar-Achse anzugeben, die eine anonyme Scroll-Fortschrittszeitleiste für die Animation 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.

anwendbar auf

animation-timeline

Parameter

scroll(<scroller> <axis>)

• Scroller: Der Wert zur Angabe des Scroller-Elements, das die Zeitleiste für den Scroll-Fortschritt bereitstellt:
  • nearest
  • root
  • self
• Axis: Scrollbar-Achse
  • block
  • inline
  • x
  • y

Beispiel

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);

 

Siehe auch

• OnePager

Weblinks

• CSSWG: The scroll() notation Scroll-driven Animations
• MDN: scroll()
• Browser-Support: caniuse.com