Propriété CSS scroll-behavior

Définition et utilisation

L'attribut scroll-behavior détermine si le défilement est effectué de manière lisse (avec un effet d'animation) lorsque l'utilisateur clique sur un lien dans une boîte de défilement, au lieu d'un saut direct.

Exemple

Ajouter un effet de défilement lisse au document :

html {
  scroll-behavior: smooth;
}

Essayez-le vous-même

Syntaxe CSS

scroll-behavior: auto|smooth|initial|inherit;

Valeur de l'attribut

Valeur Description
auto Valeur par défaut. Permet un défilement direct entre les éléments à l'intérieur de la boîte de défilement.
smooth Permet un effet de défilement lisse entre les éléments à l'intérieur de la boîte de défilement.
initial Règle cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : auto
Héritage : Non
Création d'animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : Module Vue CSSOM (brouillon de travail)
Syntaxe JavaScript : object.style.scrollBehavior="smooth"

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété en totalité.

Chrome IE / Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0