CSS-Eigenschaft scroll-behavior

Die CSS-Eigenschaft scroll-behavior legt fest, ob das Scrollverhalten innerhalb eines scrollbaren Bereichs sanft oder abrupt sein soll.

Diese Eigenschaft hat keine Wirkung auf Scrollvorgänge, die vom Benutzer ausgeführt werden. Die am body-Element angegebene Eigenschaft scroll-behavior wird nicht an den Viewport weitergegeben. Sie sollte für das html-Element angegeben werden.

User Agents können diese Eigenschaft ignorieren.

Initial Value	auto
Applies to	Scrolling boxes.
Inherited	No.
Animatable	No.
Version	CSSOM View Module (Working Draft)
DOM Syntax	object.style.scrollBehavior = "smooth";

Syntax

CSS scroll-behavior syntax

css

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

Example of the scroll-behavior property with the "auto" value:

CSS scroll-behavior code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: auto;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Example of the scroll-behavior property with the "smooth" value:

CSS scroll-behavior with smooth value, example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: smooth;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
auto	Es gibt ein abruptes Scrollverhalten zwischen den Elementen.
smooth	Es gibt ein sanftes Scrollverhalten zwischen den Elementen.
initial	Verwendet für die Eigenschaft ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Practice

Was steuert die CSS-Eigenschaft 'scroll-behavior' auf einer Webseite?

Sie steuert die Textfarbe auf einer Webseite.Sie steuert die Hintergrundfarbe einer Webseite.Sie steuert, ob eine Webseite gescrollt werden kann oder nicht.Sie steuert den Scrollmechanismus der Seite, d. h. ob die Scroll-Übergänge der Seite sanft sind.

CSS-Eigenschaft scroll-behavior ​

Syntax ​

Example of the scroll-behavior property with the "auto" value: ​

Example of the scroll-behavior property with the "smooth" value: ​