Comment - Barre de défilement personnalisée
Apprenez à créer une barre de défilement personnalisée avec CSS.
Barres de défilement personnalisées
Remarque : les barres de défilement personnalisées ne sont pas prises en charge dans Firefox ou dans Edge, version antérieure 79.
Comment créer des barres de défilement personnalisées
Chrome, Edge, Safari et Opera prennent en charge le ::-webkit-scrollbar
pseudo-élément non standard, 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 fine (10 px de large), qui a une couleur de piste/barre grise et une poignée gris foncé (#888) :
Exemple
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Cet exemple crée une barre de défilement avec une ombre de boîte :
Exemple
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Sélecteurs 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.::-webkit-scrollbar-button
les boutons de la barre de défilement (flèches pointant vers le haut et vers le bas).::-webkit-scrollbar-thumb
la poignée de défilement déplaçable.::-webkit-scrollbar-track
la piste (barre de progression) de la barre de défilement.::-webkit-scrollbar-track-piece
la piste (barre de progression) NON couverte par la poignée.::-webkit-scrollbar-corner
le coin inférieur de la barre de défilement, où les barres de défilement horizontales et verticales se rencontrent.::-webkit-resizer
la poignée de redimensionnement déplaçable qui apparaît dans le coin inférieur de certains éléments.