CSS-Eigenschaft scroll-behavior

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.