1. Web
  2. CSS
  3. ::-webkit-scrollbar

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

::-webkit-scrollbar

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

Le pseudo-élément CSS ::-webkit-scrollbar est une extension de WebKit qui permet de modifier le style de la barre de défilement associée à un élément. Il s'agit d'un pseudo-élément propriétaire, uniquement disponible pour les navigateurs WebKit.

Sélecteurs de barre de défilement

Vous pouvez utiliser les pseudo-éléments suivants pour personnaliser différentes parties de la barre de défilement (scrollbar) pour les navigateurs WebKit :

  • ::-webkit-scrollbar — la barre entière.
  • ::-webkit-scrollbar-button — les boutons de la barre de défilement (les flèches vers le bas ou le haut)
  • ::-webkit-scrollbar-thumb — l'emplacement qui permet de déplacer la barre de défilement.
  • ::-webkit-scrollbar-track — la piste (la zone de progression) de la barre de défilement
  • ::-webkit-scrollbar-track-piece — la partie de la piste qui n'est pas couverte par le bouton de la barre de défilement.
  • ::-webkit-scrollbar-corner — le coin inférieur de la barre où les barres horizontales et verticales se rencontrent.
  • ::-webkit-resizer — le bouton qui apparaît dans le coin inférieur de certains éléments et qui permet de les redimensionner.

Accessibilité

Les auteur·ice·s doivent éviter de mettre en forme les barres de défilement, car le changement de l'apparence des barres de défilement par rapport à la valeur par défaut perturbe la cohérence externe (angl.), ce qui a un impact négatif sur l'utilisabilité. Si vous mettez en forme les barres de défilement, assurez-vous qu'il y a suffisamment de contraste de couleur et que les cibles tactiles mesurent au moins 44px de large et de haut. Voir Techniques pour WCAG 2.0 : G183 : Utiliser un rapport de contraste de 3:1 (angl.) et Comprendre WCAG 2.1 : Taille de la cible (angl.).

Exemples

Mettre en forme les barres de défilement en utilisant -webkit-scrollbar

HTML

html
<div class="visible-scrollbar">
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla
  elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut
  dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis
  velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere
  est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.
  Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus.
  Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor.
  Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis.
  Aliquam at enim ligula.
</div>
<div class="invisible-scrollbar">
  C'estuntrèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèslongmot<br />
</div>
<div class="mostly-customized-scrollbar">
  C'estuntrèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèèslongmot<br />
  Et une très grande<br />
  chose avec des barres de défilement étranges.<br />
  Qui aurait pensé que les barres de défilement pouvaient être rendues
  étranges&nbsp;?
</div>

CSS

css
.visible-scrollbar,
.invisible-scrollbar,
.mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
  padding: 1em;
  margin: 1em auto;
  outline: 2px dashed cornflowerblue;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaaaaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
  background: black;
}

Résultat

Ajouter une solution de repli pour les styles de barre de défilement

Vous pouvez utiliser une règle @supports pour détecter si un navigateur prend en charge les propriétés standard scrollbar-color et scrollbar-width, et sinon utiliser une solution de repli avec les pseudo-éléments ::-webkit-scrollbar-*. L'exemple suivant montre comment appliquer des couleurs aux barres de défilement en utilisant scrollbar-color si pris en charge et les pseudo-éléments ::-webkit-scrollbar-* si ce n'est pas le cas.

HTML

html
<div class="scroll-box">
  <h1>Yoshi</h1>
  <p>
    Yoshi est un dinosaure fictif qui apparaît dans des jeux vidéo publiés par
    Nintendo. Yoshi a fait ses débuts dans Super Mario World (1990) sur la SNES
    en tant qu'acolyte de Mario et Luigi.
  </p>
  <p>
    Tout au long de la série principale de Super Mario, Yoshi sert généralement
    de monture de confiance à Mario.
  </p>
  <p>
    Avec un appétit glouton, Yoshi peut gober des ennemis avec sa longue langue,
    et pondre des œufs qui fonctionnent également comme projectiles.
  </p>
</div>

CSS

css
/* Pour les navigateurs qui prennent en charge les propriétés `scrollbar-*` */
@supports (scrollbar-color: auto) {
  .scroll-box {
    scrollbar-color: aquamarine cornflowerblue;
  }
}

/* Sinon, utilisez les pseudo-éléments `::-webkit-scrollbar-*` */
@supports selector(::-webkit-scrollbar) {
  .scroll-box::-webkit-scrollbar {
    background: aquamarine;
  }
  .scroll-box::-webkit-scrollbar-thumb {
    background: cornflowerblue;
  }
}

Résultat

Dans l'exemple ci-dessous, vous pouvez faire défiler la boîte bordée verticalement pour voir l'effet de la mise en forme de la barre de défilement.

Spécifications

Ce pseudo-élément ne fait partie d'aucun standard.

Compatibilité des navigateurs

css.selectors.-webkit-scrollbar

css.selectors.-webkit-scrollbar-button

css.selectors.-webkit-scrollbar-thumb

css.selectors.-webkit-scrollbar-track

css.selectors.-webkit-scrollbar-track-piece

css.selectors.-webkit-scrollbar-corner

css.selectors.-webkit-resizer

Voir aussi

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content