scroll-behavior

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Die scroll-behavior CSS-Eigenschaft legt das Verhalten für ein Scrollfeld fest, wenn das Scrollen durch die Navigation oder CSSOM-Scrolling-APIs ausgelöst wird.

Probieren Sie es aus

scroll-behavior: auto;

scroll-behavior: smooth;

<section id="default-example">
  <div class="container">
    <p class="nav">
      Scroll to:
      <a href="#pageA">A</a>
      <a href="#pageB">B</a>
      <a href="#pageC">C</a>
    </p>
    <scroll-container id="example-element">
      <scroll-page id="pageA">A</scroll-page>
      <scroll-page id="pageB">B</scroll-page>
      <scroll-page id="pageC">C</scroll-page>
    </scroll-container>
  </div>
</section>

/* stylelint-disable selector-type-no-unknown */
.container {
  flex-direction: column;
}

.nav a {
  color: #009e5f;
}

scroll-container {
  border: 1px solid black;
  display: block;
  height: 200px;
  overflow-y: scroll;
  width: 200px;
}

scroll-page {
  align-items: center;
  display: flex;
  font-size: 5em;
  height: 100%;
  justify-content: center;
}

Beachten Sie, dass andere Arten des Scrollings, wie zum Beispiel diejenigen, die vom Benutzer durchgeführt werden, von dieser Eigenschaft nicht beeinflusst werden. Wenn diese Eigenschaft auf dem Root-Element angegeben ist, gilt sie stattdessen für den Ansichtsbereich (viewport). Diese Eigenschaft, die auf dem body-Element angegeben ist, wird nicht auf den Ansichtsbereich übertragen.

Benutzeragenten dürfen diese Eigenschaft ignorieren.

Syntax

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

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

Die scroll-behavior-Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

auto

Das Scrollfeld scrollt sofort.

smooth

Das Scrollfeld scrollt auf sanfte Weise mit einer benutzerdefinierten Übergangsfunktion und über einen benutzerdefinierten Zeitraum. Benutzeragenten sollten, wenn vorhanden, den Plattformkonventionen folgen.

Formale Definition

Anfangswertauto
Anwendbar aufscrollende Boxen
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

scroll-behavior = 
  auto    |
  smooth

Beispiele

Sanftes Scrollverhalten festlegen

HTML

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

CSS

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 {
  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

Specification
CSS Overflow Module Level 3
# smooth-scrolling

Browser-Kompatibilität

BCD tables only load in the browser