La propriété 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. Pour les autres défilements, 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).

Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément body, elle ne se propage pas à la zone d'affichage (viewport).

Syntaxe

/* Valeurs avec un mot-clé */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Valeurs globales */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

La propriété scroll-behavior est définie avec l'un des mots-clés suivants.

Valeurs

auto
La boîte de défilement progresse de façon instantanée.
smooth
Le défilement est doux et utilise une fonction de minutage définie par l'agent utilisateur pendant une période définie par l'agent utilisateur. Les agents utilisateur doivent respecter les conventions de la plate-forme s'il y en a.

Syntaxe formelle

auto | smooth

Exemples

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 {
  display: block;
  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;
}

HTML

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

Résultat

Spécifications

Spécification État Commentaires
CSS Object Model (CSSOM) View Module
La définition de 'scroll-behavior' dans cette spécification.
Version de travail Définition initiale.

Valeur initialeauto
Applicabilitéboîtes défilantes
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 61
Désactivée
Support complet 61
Désactivée
Désactivée From version 61: this feature is behind the Enable experimental web platform features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge Aucun support NonFirefox Support complet 36IE Aucun support NonOpera Support complet Oui
Désactivée
Support complet Oui
Désactivée
Désactivée This feature is behind the Smooth Scrolling preference (needs to be set to true).
Safari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 36Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,