Barres de défilement personnalisées Mixin - Astuces CSS

Les barres de défilement sont l'un de ces composants d'interface utilisateur qui sont présents sur presque toutes les pages d'Internet, mais nous (les développeurs) avons peu ou pas de contrôle dessus. Certains navigateurs nous donnent la possibilité de personnaliser leur apparence, mais pour la plupart des navigateurs, y compris Firefox, ce n'est tout simplement pas possible.

Il y a eu quelques mises à jour et normalisation des barres de défilement de style. Voir L'état actuel des barres de défilement de style pour le dernier, que vous pouvez porter sur un mixin.

Pourtant, Chrome et Internet Explorer (oui) nous permettent de définir des styles personnalisés pour les barres de défilement. Cependant la syntaxe est horriblement complexe, et bien sûr, certainement pas standard. Bienvenue dans le monde propriétaire. C'est pourquoi vous voudrez peut-être avoir un petit mixin pour personnaliser facilement vos barres de défilement. Droit?

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )

Usage:

body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )

Exemple

Voir le mixin Pen Sass pour le style de la barre de défilement par Hugo Giraudel (@HugoGiraudel) sur CodePen.

Aller plus loin

Sur les deux navigateurs, il y a beaucoup plus d'options que la couleur et la taille. Cependant, ils sont souvent négligés, donc je ne pense pas qu'il vaut la peine de surcharger le mixin avec ces options. N'hésitez pas à créer un mixin plus avancé avec des options supplémentaires.

Lectures complémentaires: