scroll-behavior
Try it
Die
scroll-behavior
CSS-Eigenschaft spezifiziert das Scroll-Verhalten einer Scroll-Box, wenn ein Scroll-Event durch eine Navigation oder durch CSSOM APIs ausgelöst wird.Initialwert | auto |
---|---|
Anwendbar auf | scrollende Boxen |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Der Quellcode für dieses interaktive Beispiel liegt in einem GitHub-Repository. Falls du zu dem interactive examples Projekt beitragen möchtest, klone bitte https://github.com/mdn/interactive-examples und schick uns einen Pull Request.
body
-Element spezifiziert, wird es nicht an den Viewport weitergegeben.Syntax
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
Sämltiche anderen Arten des Scrollens, beispielsweise durch den User, sind von dieser Eigenschaft nicht betroffen.
Wenn diese Eigenschaft auf ein Root-Element angewendet, betrifft sie stattdessen den gesamten Viewport.
Wird die Eigenschaft dem body
zugeordnet, wrikt sie sich hingegen nicht auf den Viewport aus.
Ein User Agent kann diese Eigenschaft auch ignorieren.
Initialwert | auto |
---|---|
Anwendbar auf | scrollende Boxen |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Syntax
Die Eigenschaft scroll-behavior
kann dabei folgende Werte annehmen:
Werte
auto
- Die scrolling Box scrollt sofort.
smooth
- Die scrolling Box scrollt mit einem flüssigen/smoothen Verhalten.
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.
Formelle Syntax
auto | smooth
Beispiel
HTML
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<scroll-container>
<scroll-page id="page-1">1</scroll-page>
<scroll-page id="page-2">2</scroll-page>
<scroll-page id="page-3">3</scroll-page>
</scroll-container>
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;
}
Ergebnis
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Object Model (CSSOM) View Module Die Definition von 'scroll-behavior' in dieser Spezifikation. |
Arbeitsentwurf | Initial specification |
Browser compatibility
BCD tables only load in the browser