CSS Scrollbars

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Le module de spécification CSS Scrollbars standardise la mise en forme des barres de défilement (scrollbar) notamment introduite en 2000 avec Windows IE 5.5.

Exemples

Dans l'exemple qui suit, on crée une barre de défilement fine avec une piste verte et un curseur violet.

CSS

css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

HTML

html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>

Résultat

Référence

Propriétés

Accessibilité

Lors du paramétrage des barres de défilement, on s'assurera que le contraste avec les éléments alentour est suffisant et que la surface d'interaction est suffisamment grande pour les personnes qui utilisent une interface tactile.

Spécifications

Specification
CSS Scrollbars Styling Module Level 1

Compatibilité des navigateurs

css.properties.scrollbar-color

BCD tables only load in the browser

css.properties.scrollbar-width

BCD tables only load in the browser

Voir aussi