Propriété CSS scroll-behavior
Utilisez la propriété CSS scroll-behavior pour définir le comportement du défilement. Découvrez les valeurs et des exemples.
La propriété CSS scroll-behavior définit si un défilement déclenché par la navigation ou par un script (une « boîte de défilement » qui saute vers une ancre ou vers des coordonnées) doit être smooth (animé) ou instantané (un saut unique). Par défaut, elle est auto, ce qui signifie un saut brusque.
Cette page explique ce que fait la propriété, où vous devez la déclarer, la différence entre ses valeurs, les erreurs courantes et son rapport avec les API de défilement JavaScript.
Quand l'utiliser ?
Le cas d'utilisation le plus courant est la navigation dans la page. Lorsqu'un lien pointe vers un fragment tel que <a href="#section">, le navigateur saute instantanément vers la cible. En définissant scroll-behavior: smooth sur le conteneur de défilement, ce saut se transforme en un défilement animé agréable — sans une seule ligne de JavaScript.
html {
scroll-behavior: smooth;
}Où la déclarer
Deux règles prêtent souvent à confusion :
- Elle n'affecte que les défilements programmatiques et déclenchés par la navigation — cliquer sur une ancre, appeler
element.scrollIntoView(),window.scrollTo(), etc. Elle n'a aucun effet sur les défilements effectués par l'utilisateur avec la molette, le pavé tactile ou la barre de défilement. - Pour le défilement du viewport, déclarez-la sur
html, pas surbody. La valeur déclarée sur l'élément body ne se propage pas au viewport et serait donc ignorée. Déclarez-la sur l'élément html (la boîte de défilement racine). Pour tout autre conteneur défilable, déclarez-la sur ce conteneur lui-même.
Les agents utilisateurs sont autorisés à ignorer cette propriété, et elle sera ignorée pour les utilisateurs qui demandent une réduction du mouvement (voir Accessibilité ci-dessous).
| Valeur initiale | auto |
|---|---|
| S'applique à | Boîtes de défilement. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSSOM View Module (Working Draft) |
| Syntaxe DOM | object.style.scrollBehavior = "smooth"; |
Syntaxe
Syntaxe CSS de scroll-behavior
scroll-behavior: auto | smooth | initial | inherit;Exemple de la propriété scroll-behavior avec la valeur "auto" :
Exemple de code CSS scroll-behavior
<!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>Exemple de la propriété scroll-behavior avec la valeur "smooth" :
CSS scroll-behavior avec la valeur smooth, exemple
<!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>Avec smooth, cliquer sur l'un ou l'autre lien anime la page entre les deux blocs au lieu de sauter instantanément. Seule la valeur de scroll-behavior diffère de l'exemple précédent.
Valeurs
| Valeur | Description |
|---|---|
| auto | Par défaut. Le défilement se produit en un saut instantané unique, sans animation. |
| smooth | Le défilement est animé progressivement entre les positions de départ et d'arrivée. |
| initial | Définit la propriété à sa valeur par défaut (auto). |
| inherit | Hérite la valeur de l'élément parent. |
Défilement animé sur un conteneur spécifique
scroll-behavior n'est pas limitée à la page. Déclarez-la sur tout élément qui possède sa propre barre de défilement (une boîte overflow: auto ou overflow: scroll) et les défilements programmatiques dans ce conteneur seront également animés. Voir overflow pour savoir comment créer des boîtes défilables.
.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;Relation avec les API de défilement JavaScript
scroll-behavior est la manière CSS de définir l'animation par défaut d'un conteneur de défilement. Les API de défilement peuvent également demander une animation pour chaque appel grâce à une option behavior, qui remplace la valeur CSS pour cet appel unique :
// One-off smooth scroll, regardless of the CSS scroll-behavior value.
element.scrollIntoView({ behavior: 'smooth' });
window.scrollTo({ top: 0, behavior: 'smooth' });Utilisez la propriété CSS lorsque vous souhaitez que chaque saut de navigation/ancre dans un conteneur soit animé ; utilisez l'option JS pour un défilement ponctuel et ad hoc.
Accessibilité
Le défilement animé peut provoquer un inconfort pour les utilisateurs sensibles au mouvement. Respectez la media query prefers-reduced-motion afin que l'animation soit désactivée lorsque l'utilisateur a demandé au système de réduire le mouvement :
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}Propriétés associées
- overflow — crée les boîtes défilables que
scroll-behavioranime. - scrollbar — stylise la barre de défilement de ces boîtes.
- offset-anchor — contrôle le point d'ancrage utilisé lors des transformations.
- HTML links — les ancres
href="#id"qui déclenchent le défilement animé.