---
title: scroll-behavior
slug: Web/CSS/scroll-behavior
translation_of: Web/CSS/scroll-behavior
---
<div>{{ CSSRef }}<br>
Die <strong><code>scroll-behavior</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a>-Eigenschaft spezifiziert das Scroll-Verhalten einer Scroll-Box, wenn ein Scroll-Event durch eine Navigation oder durch CSSOM APIs ausgelöst wird.</div>

<div>{{cssinfo}}</div>

<div></div>

<div>
<div>
<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div>

<p class="hidden">Der Quellcode für dieses interaktive Beispiel liegt in einem GitHub-Repository. Falls du zu dem interactive examples Projekt beitragen möchtest, klone bitte <a class="tgwf_grey" href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und schick uns einen Pull Request.</p>
</div>
</div>

<div>Beachte, dass andere Scroll-Verhalten, wie etwa solche durch den Nutzer ausgelöste, nicht durch diese Eigenschaft beeinflusst werden. Wenn diese Eigenschaft für das Wurzel-Element spezifiziert wird, beeinflusst es stattdessen den Viewport. Wird diese Eigenschaft für das <code>body</code>-Element spezifiziert, wird es <em>nicht</em> an den Viewport weitergegeben.</div>

<div></div>

<div>User Agents dürfen diese Eigenschaft ignorieren.</div>

<hr>
<div>
<h2 id="Syntax" name="Syntax">Syntax</h2>
</div>

<pre class="brush:css no-line-numbers">/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

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

<p>Sämltiche anderen Arten des Scrollens, beispielsweise durch den User, sind von dieser Eigenschaft nicht betroffen.<br>
 Wenn diese Eigenschaft auf ein Root-Element angewendet, betrifft sie stattdessen den gesamten Viewport.<br>
 Wird die Eigenschaft dem <code>body</code> zugeordnet, wrikt sie sich hingegen <em>nicht</em> auf den Viewport aus.<br>
 <br>
 Ein User Agent kann diese Eigenschaft auch ignorieren.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<p>Die Eigenschaft <code>scroll-behavior</code> kann dabei folgende Werte annehmen:</p>

<h3 class="brush:css" id="Werte">Werte</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>Die scrolling Box scrollt sofort.</dd>
 <dt><code>smooth</code></dt>
 <dd>Die scrolling Box scrollt mit einem flüssigen/smoothen Verhalten.<br>
 Der User Agent definiert dabei sowohl die Geschwindigkeit als auch die dafür benötigte Dauer. Der User Agent sollte dabei nach Möglichkeit den Platform-Konventionen folgen.</dd>
</dl>

<h3 id="Formelle_Syntax">Formelle Syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Example" name="Example">Beispiel</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;nav&gt;
  &lt;a href="#page-1"&gt;1&lt;/a&gt;
  &lt;a href="#page-2"&gt;2&lt;/a&gt;
  &lt;a href="#page-3"&gt;3&lt;/a&gt;
&lt;/nav&gt;
&lt;scroll-container&gt;
  &lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
  &lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
  &lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
&lt;/scroll-container&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: 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;
}
</pre>

<h3 id="Ergebnis">Ergebnis</h3>

<p>{{ EmbedLiveSample("Example", "100%", 250) }}</p>

<h2 id="Specifications" name="Specifications">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>Initial specification</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

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

<p>{{Compat("css.properties.scroll-behavior")}}</p>