La scroll-behaviorpropriété en CSS nous permet de définir si l'emplacement de défilement du navigateur saute vers un nouvel emplacement ou anime en douceur la transition lorsqu'un utilisateur clique sur un lien qui cible une position ancrée dans une boîte de défilement.
html ( scroll-behavior: smooth; )Explication plus approfondie
Attendez, attendez, de quoi cette boîte de défilement dont nous parlons? C'est un élément avec un contenu qui dépasse ses limites.
Voir la boîte de défilement du stylet par CSS-Tricks (@ css-tricks) sur CodePen.
Remarquez comment la boîte de la démo ci-dessus a une hauteur fixe de 200px? Tout contenu qui dépasse cette hauteur est en dehors des limites de la boîte et nous avons ajouté overflow-y: scrollpour rendre ce contenu supplémentaire accessible avec le défilement vertical. C'est ce que nous entendons par boîte de défilement.
Disons maintenant que nous ajoutons une navigation en haut de la boîte avec chaque lien ciblant les trois sections de contenu:
Voir la boîte de défilement du stylet avec Nav par CSS-Tricks (@ css-tricks) sur CodePen.
Chaque lien amène l'utilisateur directement aux différentes sections de contenu à l'intérieur de la boîte de défilement. Par défaut, cette transition entre est un saut brusque.
Ce genre de saut peut être choquant. C'est là scroll-behaviorqu'intervient et nous permet de définir une transition de défilement fluide. Ce genre de chose prenait autrefois du Javascript sophistiqué, mais scroll-behaviornous donnera la possibilité de le faire nativement en CSS, une fois que le support du navigateur s'améliorera.
Syntaxe
.module ( scroll-behavior: ( auto | smooth ); )Valeurs
La scroll-behaviorpropriété accepte deux valeurs, qui activent et désactivent essentiellement la fonction de défilement fluide.
auto(par défaut): Cette valeur permet le saut brusque entre les éléments dans la boîte de défilement.smooth: Fidèle à son nom, cette valeur correspond à la transition douce et animée entre les éléments de la zone de défilement.
Démo
La démo suivante ne fonctionnera que sur Chrome 61+, Firefox 36+ et Opera 48+ au moment de la rédaction de cet article.
Voir la boîte de défilement du stylet avec `scroll-behavior` par CSS-Tricks (@ css-tricks) sur CodePen.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 61 | 36 | Non | 79 | Non |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | Non |
Plus d'information
- Module d'affichage CSSOM: le projet de spécification, y compris la propriété CSS. Le projet actuel comprend une recommandation de déplacer le
scroll-behaviorvers une autre spécification, il sera donc intéressant de voir où cela arrive. - Mozilla Developer Network: la référence MDN pour la spécification
- État de la plate-forme Microsoft Edge: affiche actuellement l'état de cette fonctionnalité comme étant à l'étude
- Statut de la plate-forme Chrome: affiche actuellement le statut de cette fonctionnalité en cours de développement et inclut les statuts des autres plates-formes en tant que témoin
- Smooth Scrolling Snippet: Snippets pour permettre un défilement fluide avec Javascript et jQuery
- Défilement fluide et accessibilité: un article CSS-Tricks sur l'impact du défilement fluide activé par Javascript