Le saviez-vous – CSS Smooth-scrolling avec scroll-behavior

Also available in: English

Récemment dans un petit projet assez proche du prototype, j’ai eu à proposer quelques petites choses comme un menu sticky, un scroll-spy, mixé avec du smooth-scroll. Plein d’effets qui demandent quand même quelques lignes de JS. Et bien pas cette fois.

La norme

Le CSS WG a introduit scroll-behavior dans ses brouillons pour permettre de gérer le comportement du défilement des zones concernées. Cette propriété nouvelle vient avec très peu de valeurs puisqu’elle propose auto ou smooth.

The scroll-behavior property specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs. Any other scrolls, e.g. those that are performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead.

Pour faire simple, cette propriété s’applique à toutes les actions qui permettent la navigation au sein d’une boîte avec défilement. Sauf si l’utilisateur scroll lui-même dans la page manuellement.

Le bout de code magique en CSS

Venons-en à l’essentiel.
Pour mon petit projet, je n’avais pas besoin de me soucier du support, qui est plutôt bon sur Chrome et Firefox déjà en fait, du coup mon code CSS pour intégrer du smooth-scroll dans ma page au lieu d’avoir des ancres qui me font sauter d’un point à un autre c’était globalement ça :

html,
body {
    scroll-behavior: smooth;
}

Et voilàààà ! Résolu !

Pour rappel à une époque lointaine, je publiais l’article Smooth-Scroll en jQuery.
Je vous laisse comparer 🙂

Pour ceux qui veulent une démo avec le code éditable, voici un petit CodePen.

Support

Je vous laisse également avec le support de cette feature CSS qui est plutôt bonne déjà pour de l’amélioration progressive.