Créer une scrollbar personnalisée

Créer une scrollbar personnalisée est souvent très utile pour ceux qui apprécient le frontend et qui veulent donner un côté original à leur site internet. Ce que vous allez voir dans cet article n'est toutefois compatible qu'avec Safari et Google Chrome pour le moment. Vos autres visiteurs continueront de voir la barre de scroll classique.

Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram.

1ère étape

Comme nous venons de le voir dans la présentation de cet article, cette scrollbar n'est disponible que sur Safari et Google Chrome : on précise donc -webkit- dans notre fichier CSS :

body::-webkit-scrollbar {
    width: 10px;
}

2ème étape

Il est temps de définir la couleur de l'arrière-plan de la scrollbar (la couleur de la barre donc).

body::-webkit-scrollbar-track {
    background-color: #e5e5e5;
}

3ème étape

Nous avons défini la largeur et la couleur de la barre... Nous allons maintenant préciser la couleur du scrolleur (la petite barre qui permet de défiler sur une page).

body::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #5c2a9d;
}

4ème étape

Dernière étape de ce projet : définir la couleur du scrolleur lors du survol. Pour ça nous allons utiliser le très célèbre sélecteur d'événement hover :

body::-webkit-scrollbar-thumb:hover {
    background-color: #b5076b;
}