Propriété CSS scroll-behavior

La propriété CSS scroll-behavior définit si le comportement de défilement doit être fluide ou abrupt au sein d'une zone défilante.

Cette propriété n'a aucun effet sur les défilements effectués par l'utilisateur. La propriété scroll-behavior spécifiée sur l'élément body ne se propage pas à la zone d'affichage (viewport). Elle doit être spécifiée sur l'élément html.

Les agents utilisateurs peuvent ignorer cette propriété.

Valeur initiale	auto
S'applique à	Zones défilantes.
Héritée	Non.
Animable	Non.
Version	Module CSSOM View (Brouillon de travail)
Syntaxe DOM	object.style.scrollBehavior = "smooth";

Syntaxe

Syntaxe CSS de scroll-behavior

css

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

Exemple de la propriété scroll-behavior avec la valeur "auto" :

Exemple de code CSS pour scroll-behavior

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: auto;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété scroll-behavior avec la valeur "smooth" :

Exemple de CSS scroll-behavior avec la valeur smooth

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: smooth;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
auto	Comportement de défilement abrupt entre les éléments.
smooth	Comportement de défilement fluide entre les éléments.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Pratique

Que contrôle la propriété CSS 'scroll-behavior' sur une page web ?

Elle contrôle la couleur du texte sur une page web.Elle contrôle la couleur d'arrière-plan d'une page web.Elle contrôle si une page web peut être défilée ou non.Elle contrôle le mécanisme de défilement de la page, c'est-à-dire si les transitions de défilement sont fluides.

Propriété CSS scroll-behavior ​

Syntaxe ​

Exemple de la propriété scroll-behavior avec la valeur "auto" : ​

Exemple de la propriété scroll-behavior avec la valeur "smooth" : ​