Egendefinerte rullefelt Mixin - CSS-triks

Rullefelt er en av de UI-komponentene som er tilstede på nesten alle sider på internett, men vi (utviklere) har liten eller ingen kontroll over det. Noen nettlesere gir oss muligheten til å tilpasse utseendet, men for de fleste nettlesere, inkludert Firefox, er det bare ikke mulig.

Det har vært noen oppdateringer og standardisering av styling av rullefelt. Se The Current State of Styling Scrollbars for den siste, som du kan portere til en mixin.

Likevel gjør Chrome og Internet Explorer (ja) det mulig for oss å definere tilpassede stiler for rullefelt. Imidlertid er syntaksen fryktelig kompleks, og selvfølgelig, definitivt ikke standard. Velkommen til den proprietære verdenen. Dette er grunnen til at du kanskje vil ha en liten blanding for enkelt å tilpasse rullefeltene. Ikke sant?

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

Bruk:

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

Eksempel

Se Pen Sass mixin for rullefeltstyling av Hugo Giraudel (@HugoGiraudel) på CodePen.

Gå videre

I begge nettleserne er det mange flere alternativer enn bare farge og størrelse. Imidlertid blir de ofte oversett, så jeg synes ikke det er verdt å overfylle mixin med disse alternativene. Bygg gjerne en mer avansert mixin med ekstra alternativer.

Ytterligere lesninger: