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.
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;
}
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;
}
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;
}
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;
}
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.