Personnaliser les scrollbars en CSS avec ::-webkit-scrollbar

📖 Introduction

Par défaut, les barres de défilement (scrollbars) sont rendues par le navigateur et le système d’exploitation, avec un style souvent générique et peu personnalisable. Dans certaines interfaces modernes (dashboards, applications web, Web Components), il est pourtant nécessaire d’adapter visuellement les scrollbars afin qu’elles s’intègrent au design global.

Les navigateurs basés sur WebKit et Blink (Chrome, Edge, Safari, Opera) fournissent une série de pseudo-éléments CSS propriétaires permettant de personnaliser l’apparence des scrollbars. Cet article détaille un exemple concret de personnalisation ciblée via une classe CSS dédiée.

📜 Code

.scrollbar-make ::-webkit-scrollbar {
    background-color: var(red);
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.scrollbar-make ::-webkit-scrollbar-thumb {
    background-color: var(bleu);
    border-radius: 3px;
}

.scrollbar-make ::-webkit-scrollbar-thumb:hover {
    background-color: var(black);
}
.scrollbar-make ::-webkit-scrollbar-track-piece:start {
    background: transparent;
}

.scrollbar-make ::-webkit-scrollbar-track-piece:end {
    background: transparent;
}