W3docs
fr
Se connecter

Propriété CSS scrollbar

Utilisez la propriété CSS scrollbar pour créer des thèmes personnalisés pour les barres de défilement. Consultez les valeurs et exemples.

L'ensemble de pseudo-éléments CSS ::-webkit-scrollbar est un crochet de style propriétaire permettant aux designers de créer des thèmes personnalisés pour les barres de défilement natives du navigateur.

Info

Ces pseudo-éléments sont exposés derrière le préfixe vendeur -webkit et sont principalement pris en charge dans les navigateurs basés sur Chromium. Ils ne sont pas pris en charge dans Firefox ou Safari. Pour une meilleure compatibilité entre navigateurs, envisagez d'utiliser les propriétés standard scrollbar-width et scrollbar-color.

Les pseudo-éléments ::-webkit-scrollbar se composent de sept parties différentes qui, ensemble, constituent un élément d'interface de barre de défilement complet. Ces sept pseudo-éléments sont les suivants :

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-button
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-track-piece
  • ::-webkit-scrollbar-thumb
  • ::-webkit-scrollbar-corner
  • ::-webkit-scrollbar-resizer

Une barre de défilement n'apparaît que lorsque le contenu d'un élément est plus grand que sa boîte. Son stylage va donc de pair avec la famille de propriétés overflow — overflow-x et overflow-y vous permettent de contrôler le défilement horizontal et vertical indépendamment.

Syntaxe

Pour styliser les barres de défilement, vous appliquez des règles CSS directement aux pseudo-éléments ::-webkit-scrollbar sur le conteneur défilant. Vous pouvez cibler tout élément dont overflow est défini sur scroll ou auto, pas seulement le body.

.scrolling-element::-webkit-scrollbar {
  /* scrollbar styles */
}
.scrolling-element::-webkit-scrollbar-thumb {
  /* thumb styles */
}

Exemple des pseudo-éléments de barre de défilement :

Exemple de code CSS scrollbar

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #eee;
        overflow: scroll;
        width: 85%;
        max-width: 600px;
        margin: 0 auto;
        padding: 3em;
        font: 100%/1.4 Georgia, serif;
        border: 1px solid #666;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar {
        width: 1em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      }
      body::-webkit-scrollbar-thumb {
        background-color: #666;
        outline: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Essayez vous-même »

Exemple des pseudo-éléments de barre de défilement avec ::-webkit-scrollbar-track et ::-webkit-scrollbar-thumb :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #ececec;
        overflow: scroll;
        width: 90%;
        max-width: 550px;
        margin: 0 auto;
        padding: 2em;
        border: 2px solid #cccccc;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar {
        width: 5px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Essayez vous-même »

Barres de défilement standard compatibles entre navigateurs

Étant donné que les pseudo-éléments ::-webkit-scrollbar ne fonctionnent que dans les navigateurs basés sur Chromium, le CSS Working Group a introduit deux propriétés standard que Firefox prend en charge aujourd'hui et que les moteurs Webkit/Blink reconnaissent désormais également : scrollbar-width et scrollbar-color.

  • scrollbar-width — définit l'épaisseur. Accepte les mots-clés auto (par défaut), thin, ou none (masque la barre de défilement tout en gardant l'élément défilable).
  • scrollbar-color — prend deux couleurs : la couleur du curseur en premier, puis la couleur de la piste.
.scrolling-element {
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5; /* thumb track */
}

Une approche robuste consiste à déclarer d'abord les propriétés standard comme base, puis à superposer les règles ::-webkit-scrollbar pour un contrôle plus fin dans les navigateurs Chromium qui en ont besoin :

.scrolling-element {
  /* Standard — Firefox and modern Chromium/Safari */
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5;
}

/* Detailed styling — Chromium-based browsers only */
.scrolling-element::-webkit-scrollbar {
  width: 10px;
}
.scrolling-element::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.scrolling-element::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
}
Info

Utilisez scrollbar-width: thin et scrollbar-color lorsque vous avez seulement besoin de recolorer ou d'amincir la barre de défilement dans tous les navigateurs modernes. Recourez aux pseudo-éléments ::-webkit-scrollbar uniquement lorsque vous devez styliser des parties individuelles (boutons, portion de piste, coin) que les propriétés standard ne permettent pas d'atteindre. L'arrondi du curseur avec border-radius est uniquement disponible en -webkit-.

Pseudo-éléments

Pseudo-élémentDescription
::-webkit-scrollbarLa barre de défilement elle-même.
::-webkit-scrollbar-buttonLes boutons sur la barre de défilement.
::-webkit-scrollbar-trackLa piste de la barre de défilement.
::-webkit-scrollbar-track-pieceLa partie de la piste non couverte par le curseur.
::-webkit-scrollbar-thumbLe curseur de défilement déplaçable.
::-webkit-scrollbar-cornerLe coin inférieur de la barre de défilement, où les barres de défilement horizontale et verticale se rejoignent.
::-webkit-scrollbar-resizerLa poignée de redimensionnement déplaçable qui apparaît dans le coin inférieur de certains éléments.

Exercice

Pratique
Quelles propriétés CSS sont utilisées pour modifier l'apparence des barres de défilement ?
Quelles propriétés CSS sont utilisées pour modifier l'apparence des barres de défilement ?
Was this page helpful?