CSS-Eigenschaft scroll-behavior

Die CSS-Eigenschaft scroll-behavior gibt an, ob das Scrollverhalten innerhalb eines scrollbaren Rahmens abrupt oder glatt sein soll.

Die mit dem Element body angegebene Eigenschaft scroll-behavior wird sich nicht auf den Viewport ausbreiten. Es muss für das Element html angegeben werden.

Anfangswert auto
Gilt für Scrolling boxes.
Geerbt Nein
Animierbar Nein
Version CSSOM View Module (Working Draft)
DOM Syntax object.style.scrollBehavior = "smooth";

Syntax

scroll-behavior: auto | smooth | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      html {
      scroll-behavior: auto;
      }
      #element1 {
      height: 600px;
      background-color: #ccc;
      }
      #element2 {
      height: 600px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft scroll-behavior</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Klicken Sie hier, um das Element 2 zu scrollen.</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Klicken Sie hier, um das Element 1 zu scrollen.</a>
    </div>
  </body>
</html>

Let’s see the behavior of the scroll when "smooth" value is set:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      html {
      scroll-behavior: smooth;
      }
      #element1 {
      height: 600px;
      background-color: #ccc;
      }
      #element2 {
      height: 600px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft scroll-behavior</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Klicken Sie hier, um das Element 2 zu scrollen.</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Klicken Sie hier, um das Element 1 zu scrollen.</a>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
auto Es gibt ein abruptes Scrollverhalten zwischen den Elementen.
smooth Es gibt ein glattes Scrollverhalten zwischen den Elementen.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome firefox safari opera
61.0+ 36 48.0+

Übe dein Wissen

Was macht die CSS-Eigenschaft Scroll-Behavior?
Finden Sie das nützlich?