scroll-behavior
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2022.
La propriété CSS scroll-behavior définit le comportement du défilement pour une boîte de défilement lorsque celui-ci provient de la navigation ou des API CSSOM.
Exemple interactif
scroll-behavior: auto;
scroll-behavior: smooth;
<section id="default-example">
<div class="container">
<p class="nav">
Défilement vers :
<a href="#pageA">A</a>
<a href="#pageB">B</a>
<a href="#pageC">C</a>
</p>
<scroll-container id="example-element">
<scroll-page id="pageA">A</scroll-page>
<scroll-page id="pageB">B</scroll-page>
<scroll-page id="pageC">C</scroll-page>
</scroll-container>
</div>
</section>
.container {
flex-direction: column;
}
.nav a {
color: #009e5f;
}
scroll-container {
border: 1px solid black;
display: block;
height: 200px;
overflow-y: scroll;
width: 200px;
}
scroll-page {
align-items: center;
display: flex;
font-size: 5em;
height: 100%;
justify-content: center;
}
Pour les autres défilements, tels que ceux appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (viewport en anglais). Lorsque cette propriété est indiquée sur l'élément body, elle ne se propage pas à la zone d'affichage.
Les agents utilisateur peuvent choisir d'ignorer cette propriété.
Syntaxe
/* Valeurs avec un mot-clé */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Valeurs globales */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;
La propriété scroll-behavior est définie avec l'un des mots-clés suivants.
Valeurs
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | boîtes défilantes |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | Non animable |
Syntaxe formelle
scroll-behavior =
auto |
smooth
Exemples
Définir un défilement doux
HTML
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<div class="scroll-container">
<div class="scroll-page" id="page-1">1</div>
<div class="scroll-page" id="page-2">2</div>
<div class="scroll-page" id="page-3">3</div>
</div>
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 {
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;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Overflow Module Level 3 # smooth-scrolling |