w3docs logo

Propriété CSS scroll-behavior

La propriété CSS scroll-behavior spécifie si le comportement de défilement doit être brutal ou régulier dans une zone de défilement.

La propriété scroll-behavior spécifie sur l'élément body ne se propage pas à la fenêtre. Elle doit être spécifiée pour l'élément html.

Valeur initiale auto
Appliquée à Boîtes de défilement.
Héritée Non.
Animable Non.
Version CSSOM View Module (Working Draft)
Syntaxe DOM object.style.scrollBehavior = "smooth";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      html {
      scroll-behavior: auto;
      }
      #element1 {
      height: 600px;
      background-color: #ccc;
      }
      #element2 {
      height: 600px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété scroll-behavior</h2>
    <div class="main" id="element1">
      <h2>Élément 1</h2>
      <a href="#element2">Cliquez pour défiler l'élément 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Élément 2</h2>
      <a href="#element1">Cliquez pour défiler l'élément 1</a>
    </div>
  </body>
</html>

Voyons le comportement du parchemin lorsque la valeur "smooth" est définie:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      html {
      scroll-behavior: smooth;
      }
      #element1 {
      height: 600px;
      background-color: #ccc;
      }
      #element2 {
      height: 600px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété scroll-behavior</h2>
    <div class="main" id="element1">
      <h2>Élément 1</h2>
      <a href="#element2">Cliquez pour défiler l'élément 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Élément 2</h2>
      <a href="#element1">Cliquez pour défiler l'élément 1</a>
    </div>
  </body>
</html>

Valeurs

Valeur Description
auto Il y a un comportement de défilement brutal entre les éléments.
smooth Il y a un comportement de défilement lisse entre les éléments.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome firefox safari opera
61.0+ 36 ✕ 48.0+

Pratiquez vos connaissances

Qu'est-ce que le comportement de défilement (scroll behavior) en CSS?
Trouvez-vous cela utile?