CSS/Eigenschaften/scroll-behavior

Browserunterstützung
caniuse.com

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

Standardwert

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

• CSSWG.org: scroll-behavior
• MDN: scroll-behavior
• css-tricks: scroll-behavior
• Details: caniuse.com