Voilà un élément que je pourrais ajouter à mon template de base : la stylisation de la ScrollBar (En français : la barre de scroll 🙂 ). Elle est située à droite de votre navigateur, lorsque la page que vous visitez et plus haute que la taille de votre écran. Je vous propose une « Mixins » qui vous permettra de la styliser plus facilement.
Une Mixin ?
Dans mon jargon, comprenez une fonction sous le langage SCSS, qui prendra en paramètre les valeurs qui styliseront la barre de scroll. Elle est d’autant plus utile qu’il faudra prendre en compte tous les navigateurs. En effet, il ne s’agira pas de trois lignes de codes pour styliser la barre de scroll. Même si en effet, nous paramétrons que la largeur de la barre, sa couleur, la couleur de fond et sa couleur au survol.
Comme ce n’est pas pareil pour tous les navigateurs, quelques lignes de code seront supplémentaires.
une fois créée, vous n’aurez plus qu’à modifier les valeurs qui se répètent dans la fonction.
Elle ressemblera à ceci :
.scroller {
@include scroller ($color_bg, $color_bar, $color_hover, $width)
}
La stylisation de la ScrollBar : une bonne idée ?
Est-ce une bonne idée de styliser la scrollBar ? Personnellement, sur aucun des projets professionnels qui m’ont été attribués, j’ai dû le faire ou cela m’a été demandé. Il est vrai que cela peut-être un peu perturbant, tellement nous sommes habitués à la barre grise de 12 pixels par défaut. Mais puisque c’est faisable, pourquoi s’en priver ? Cela peut ajouter une note tout à fait sympa à votre site web. Comme d’habitude, j’ai attribué le style à une classe CSS, au cas où vous ne voudriez pas l’activer. Ensuite, placez la classe sur la balise Body pour customiser la barre de votre page. (Mais vous pourriez également la placer sur des éléments dont la hauteur est plus grande que la hauteure de son parent et qui afficherait une barre de scroll sous-jacente …)
Voilà le résultat final :
Lien externe
https://developer.mozilla.org/fr/docs/Web/CSS/::-webkit-scrollbar
