CSS/Eigenschaften/scroll-behavior

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Scroll-behavior)
Wechseln zu: Navigation, Suche

Die Eigenschaft scroll-behavior spezifiziert das Scroll-Verhalten einer Scroll-Box, wenn ein Scroll-Event durch eine Navigation oder durch CSSOM APIs ausgelöst wird.

Erlaubte Werte
  • auto: (Standardwert) Die scrolling Box scrollt sofort.
  • smooth: Die scrolling Box scrollt mit einem flüssigen/smoothen Verhalten.

Der User Agent definiert dabei sowohl die Geschwindigkeit als auch die dafür benötigte Dauer. Der User Agent sollte dabei nach Möglichkeit den Platform-Konventionen folgen.

Vererbung steuernde Werte inherit, initial, unset und revert
Defaultwert

auto

anwendbar auf

scrollende Boxen

Vererbung

ja

animierbar

ja, diskret

Beispiel
scroll-container {
  display: block;
  width: 20em;
  height: 20em;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
Wenn ein Seitenanker durch einen Link angesteuert wird, ändert sich die Darstellung normalerweise plötzlich. Mit dem Wert smooth wird auch dort gescrollt.

Siehe auch

  • OnePager (Tutorial, wie man eine Single-Page Webseite mit CSS und JavaScript attraktiver macht)

Weblinks