CSS/Selektoren/scroll-button()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Browserunterstützung
caniuse.com

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>) { }
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

  • Bilder präsentieren
    • Bildergalerie mit Scroll Snap
    • figure und figcaption
      • Lazy loading
      • Bilderzoom mit Grid Layout
  • OnePager

    (Single-Page Webseite mit Scroll)

    • Komfort-Version
    • interactive Storytelling

Weblinks

Abgerufen am 7.12.2025
von "http://wiki.selfhtml.org/wiki/CSS/Selektoren/scroll-button()"