CSS/Eigenschaften/scroll-behavior

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
Browsersupport	Details: caniuse.com
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.

Weblinks

• CSSWG.org: scroll-behavior
• MDN: scroll-behavior
• css-tricks: scroll-behavior

Siehe auch

• HTML/Tutorials/Single-Page Webseite