CSS scroll-behavior Eigenschaft
Mit der CSS-Eigenschaft scroll-behavior das Scroll-Verhalten festlegen. Eigenschaftswerte und Beispiele im Überblick.
Die CSS-Eigenschaft scroll-behavior legt fest, ob ein durch Navigation oder ein Skript ausgelöster Scroll (ein „Scrolling-Box"-Sprung zu einem Anker oder zu einer Koordinate) sanft (animiert) oder sofortig (ein einzelner Sprung) sein soll. Standardmäßig ist sie auto, was einem abrupten Sprung entspricht.
Diese Seite erklärt, was die Eigenschaft bewirkt, wo sie deklariert werden muss, den Unterschied zwischen ihren Werten, häufige Fallstricke und wie sie mit den JavaScript-Scroll-APIs zusammenhängt.
Wann würde ich sie verwenden?
Der häufigste Anwendungsfall ist die seitenintere Navigation. Wenn ein Link auf ein Fragment wie <a href="#section"> verweist, springt der Browser normalerweise sofort zum Ziel. Indem scroll-behavior: smooth auf dem Scroll-Container gesetzt wird, wird dieser Sprung zu einem angenehmen animierten Scroll — ohne eine einzige Zeile JavaScript.
html {
scroll-behavior: smooth;
}Wo deklarieren
Zwei Regeln führen häufig zu Verwirrung:
- Es betrifft nur programmatische und navigationsausgelöste Scrolls — das Klicken auf einen Anker, der Aufruf von
element.scrollIntoView(),window.scrollTo()usw. Es hat keinen Einfluss auf Scrolls, die der Nutzer mit dem Mausrad, Trackpad oder der Scrollleiste ausführt. - Für viewport-Scrolling muss es auf
htmlgesetzt werden, nicht aufbody. Der am body-Element deklarierte Wert wird nicht an den viewport weitergegeben und wird daher ignoriert. Deklariere es am html-Element (der Root-Scrolling-Box). Für jeden anderen scrollbaren Container wird es direkt an diesem Container deklariert.
User-Agents dürfen diese Eigenschaft ignorieren, und sie wird für Nutzer übersprungen, die reduzierte Bewegung anfordern (siehe Barrierefreiheit unten).
| Anfangswert | auto |
|---|---|
| Gilt für | Scrolling-Boxen. |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | CSSOM View Module (Working Draft) |
| DOM-Syntax | object.style.scrollBehavior = "smooth"; |
Syntax
CSS scroll-behavior Syntax
scroll-behavior: auto | smooth | initial | inherit;Beispiel der scroll-behavior-Eigenschaft mit dem Wert "auto":
CSS scroll-behavior Codebeispiel
<!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>Beispiel der scroll-behavior-Eigenschaft mit dem Wert "smooth":
CSS scroll-behavior mit smooth-Wert, Beispiel
<!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>Mit smooth animiert ein Klick auf einen der Links die Seite zwischen den beiden Blöcken, anstatt sofort zu springen. Nur der scroll-behavior-Wert unterscheidet sich vom vorherigen Beispiel.
Werte
| Wert | Beschreibung |
|---|---|
| auto | Standard. Der Scroll erfolgt in einem einzigen sofortigen Sprung, ohne Animation. |
| smooth | Der Scroll wird sanft zwischen Start- und Endposition animiert. |
| initial | Setzt die Eigenschaft auf ihren Standardwert (auto). |
| inherit | Erbt den Wert vom übergeordneten Element. |
Einen bestimmten Container glätten
scroll-behavior ist nicht auf die Seite beschränkt. Deklariere es auf jedem Element mit einer eigenen Scrollleiste (einer overflow: auto- oder overflow: scroll-Box) und programmatische Scrolls innerhalb dieses Containers werden ebenfalls animiert. Siehe overflow für die Erstellung scrollbarer Boxen.
.panel {
height: 300px;
overflow-y: auto;
scroll-behavior: smooth;
}// Smoothly scrolls .panel to its bottom because the
// container has scroll-behavior: smooth.
const panel = document.querySelector('.panel');
panel.scrollTop = panel.scrollHeight;Beziehung zu JavaScript-Scroll-APIs
scroll-behavior ist der CSS-Weg, die Standard-Animation für einen Scroll-Container festzulegen. Die Scroll-APIs können pro Aufruf auch Glättung mit einer behavior-Option anfordern, die den CSS-Wert für diesen einzelnen Aufruf überschreibt:
// One-off smooth scroll, regardless of the CSS scroll-behavior value.
element.scrollIntoView({ behavior: 'smooth' });
window.scrollTo({ top: 0, behavior: 'smooth' });Verwende die CSS-Eigenschaft, wenn jede Navigation/jeder Anker-Sprung in einem Container sanft sein soll; verwende die JS-Option für einen einzelnen, spontanen Scroll.
Barrierefreiheit
Sanftes Scrollen kann bei Nutzern, die empfindlich auf Bewegung reagieren, Unbehagen verursachen. Respektiere die prefers-reduced-motion-Media-Query, damit die Animation deaktiviert wird, wenn der Nutzer das System aufgefordert hat, Bewegungen zu reduzieren:
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}Verwandte Eigenschaften
- overflow — scrollbare Boxen erstellen, die
scroll-behavioranimiert. - scrollbar — die Scrollleiste dieser Boxen gestalten.
- offset-anchor — den Ankerpunkt bei Transformationen steuern.
- HTML-Links — die
href="#id"-Anker, die sanftes Scrollen auslösen.