scroll-behavior

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 au viewport.

Les agents utilisateur peuvent choisir d'ignorer cette propriété.

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

Syntaxe

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

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

Valeurs

auto
La boîte de défilement est défilée 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

HTML

<div id="scrollContainer">
  Un long texte, utilisé tout particulièrement pour démontrer l'effet de la propriété CSS <code>scroll-behavior</code>, si si.
</div>
<button class="scroll-auto">auto</button>
<button class="scroll-smooth">smooth</button>

CSS

div {
  width: 100px;
  height: 100px;
  overflow-y: scroll;
}

.auto {
  scroll-behavior: auto;
}

.smooth {
  scroll-behavior: smooth;
}

JavaScript

function scrollElement(behavior) {
  var scrollContainer = document.getElementById("scrollContainer");
  scrollContainer.className = behavior;
  var scrollPosition = scrollContainer.scrollTop === 0 ? scrollContainer.scrollHeight : 0;
  scrollContainer.scrollTo(0, scrollPosition);
}

// On ajout des gestionnaires d'événement aux boutons.
document.querySelector(".scroll-auto").addEventListener(
  "click",
  function () {
   scrollElement("auto");
  });
document.querySelector(".scroll-smooth").addEventListener(
  "click",
  function () {
   scrollElement("smooth");
  });

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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui)[1] 36 (36) Pas de support (Oui)[1] ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support 36 (36) Pas de support Pas de support Pas de support

[1] Supporté par Chrome et Opera en activant la préférence « Défilement doux » ou « Activer les fonctionnalités expérimentales de Web Platform » sous chrome://flags.

Étiquettes et contributeurs liés au document

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