CSS/Selektoren/scroll-button()

Der ::scroll-button()-Selektor erzeugt ein Pseudoelement als Schaltfläche zur Steuerung des Bildlaufs eines Scroll-Containers dar. Die Richtung des Bildlaufs wird durch den Parameterwert bestimmt.

Parameter:

• *: alle erzeugten Elemente
• down
• right
• up
• left
• block-end
• block-start
• inline-end
• inline-start

Syntax	::scroll-button(<scroll-button-direction>) { }
Browsersupport	Details: caniuse.com

Beispiel

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: rebeccapurple;
  opacity: 0.7;
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  opacity: 1;
}

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

Mit ul::scroll-button(*) werden Pseudoelemente erzeugt, die mit cursor:pointer als interaktiv markiert werden. Je nach ihrer Position, die über den Parameter festgelegt wird, erhalten sie in der content-Eigenschaft unterschiedliche Pfeile.

Siehe auch

• OnePager
  • Komfort-Version

Weblinks

• W3C: Scroll buttons CSS Overflow Module Level 5
• MDN: ::scroll-button
• MDN: CSS Carousels
• Carousels with CSS Adam Argyle, 20.03.2025 (developer.chrome.com)