Comment créer : Barre de défilement personnalisée

Apprenez à créer une barre de défilement personnalisée avec CSS.

Barre de défilement personnalisée

Essayez-le vous-même

Essayez-le vous-même

Attention :Firefox ou les versions précédentes de Edge 79 ne supportent pas la barre de défilement personnalisée.

Comment créer une barre de défilement personnalisée

Chrome, Edge, Safari et Opera supportent les pseudo-éléments non standardisés ::-webkit-scrollbar Pseudo-élément qui nous permet de modifier l'apparence de la barre de défilement du navigateur.

L'exemple suivant crée une barre de défilement de largeur 10px, avec une piste de couleur grise et un glisseur de couleur foncée (#888) :

/* Largeur */
::-webkit-scrollbar {
  width: 10px;
}
/* Piste */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Glisseur */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Glisseur au survol de la souris */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Essayez-le vous-même

L'exemple suivant crée une barre de défilement avec un effet d'ombre :

Exemple

/* Largeur */
::-webkit-scrollbar {
  width: 20px;
}
/* Piste */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px gris;
  border-radius: 10px;
}
/* Glisseur */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Essayez-le vous-même

Sélecteur de barre de défilement

Pour les navigateurs webkit, vous pouvez utiliser les pseudo-éléments suivants pour personnaliser la barre de défilement du navigateur :

::-webkit-scrollbar La barre de défilement elle-même.
::-webkit-scrollbar-button Les boutons de la barre de défilement (flèches vers le haut et vers le bas).
::-webkit-scrollbar-thumb Le glisseur déplaçable.
::-webkit-scrollbar-track La piste (barre de progression) de la barre de défilement.
::-webkit-scrollbar-track-piece La partie de la piste (barre de progression) non couverte par le glisseur.
::-webkit-scrollbar-corner Le coin inférieur droit de la barre de défilement, où les barres de défilement horizontale et verticale se croisent.
::-webkit-resizer Poignée de glissement ajustable à partir du coin inférieur droit de certains éléments.