scroll-behavior

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

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

Jedes scrollen, welches vom User durchgeführt wird, ist nicht betroffen von dieser Eigenschaft. Wenn diese Eigenschaft im Root-Element spezifiert wurde, betrifft es stattdessen den Viewport

User agents ist es erlaubt diese Eigenschaft zu ignorieren.

Syntax

The scroll-behavior property is specified as one of the keyword values listed below.
Die Eigenschaft scroll-behavior  wird durch die Werte, die unten aufgeführt sind, spezifiert.

Values

auto

Die scrolling Box scrollt sofort.

smooth

The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.
 

Formal syntax

auto | smooth

Example

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;
}

Result

Specifications

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.