scroll-behavior

Try it

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

Initialwert	`auto`
Anwendbar auf	scrollende Boxen
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Beachte, dass andere Scroll-Verhalten, wie etwa solche durch den Nutzer ausgelöste, nicht durch diese Eigenschaft beeinflusst werden. Wenn diese Eigenschaft für das Wurzel-Element spezifiziert wird, beeinflusst es stattdessen den Viewport. Wird diese Eigenschaft für das body-Element spezifiziert, wird es nicht an den Viewport weitergegeben.

User Agents dürfen diese Eigenschaft ignorieren.

Syntax

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

Sämltiche anderen Arten des Scrollens, beispielsweise durch den User, sind von dieser Eigenschaft nicht betroffen.
Wenn diese Eigenschaft auf ein Root-Element angewendet, betrifft sie stattdessen den gesamten Viewport.
Wird die Eigenschaft dem body zugeordnet, wrikt sie sich hingegen nicht auf den Viewport aus.

Ein User Agent kann diese Eigenschaft auch ignorieren.

Initialwert	`auto`
Anwendbar auf	scrollende Boxen
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Syntax

Die Eigenschaft scroll-behavior kann dabei folgende Werte annehmen:

Werte

auto: 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.

Formelle Syntax

auto | smooth

Beispiel

HTML

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

CSS

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

Ergebnis

Spezifikationen

Spezifikation	Status	Kommentar
CSS Object Model (CSSOM) View Module Die Definition von 'scroll-behavior' in dieser Spezifikation.	Arbeitsentwurf	Initial specification

Browser compatibility

BCD tables only load in the browser