Aangepaste schuifbalken Mixin - CSS-trucs

Scrollbars zijn een van die UI-componenten die op bijna elke pagina van internet aanwezig zijn, maar wij (ontwikkelaars) hebben er weinig tot geen controle over. Sommige browsers geven ons de mogelijkheid om hun uiterlijk aan te passen, maar voor de meeste browsers, inclusief Firefox, is dit gewoon niet mogelijk.

Er zijn enkele updates en standaardisatie geweest voor het opmaken van schuifbalken. Zie The Current State of Styling Scrollbars voor de laatste informatie, die u naar een mixin kunt porten.

Toch maken Chrome en Internet Explorer (ja) het ons mogelijk om aangepaste stijlen voor schuifbalken te definiëren. De syntaxis is echter vreselijk complex, en natuurlijk zeker niet standaard. Welkom in de eigen wereld. Dit is waarom je misschien een kleine mix wilt hebben om je schuifbalken gemakkelijk aan te passen. Rechtsaf?

@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; ) )

Gebruik:

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

Voorbeeld

Zie de Pen Sass-mixin voor scrollbar-styling door Hugo Giraudel (@HugoGiraudel) op CodePen.

Verder gaan

In beide browsers zijn er veel meer opties dan alleen kleur en grootte. Ze worden echter vaak over het hoofd gezien, dus ik denk niet dat het de moeite waard is om de mix met deze opties te overvol. Voel je vrij om een meer geavanceerde mixin te bouwen met extra opties.

Verdere lezingen: