Rullebjælker er en af disse UI-komponenter, der findes på næsten alle sider på internettet, men alligevel har vi (udviklere) ringe eller ingen kontrol over det. Nogle browsere giver os mulighed for at tilpasse deres udseende, men for de fleste browsere inklusive Firefox er det bare ikke muligt.
Der har været nogle opdateringer og standardisering af styling af rullepaneler. Se den aktuelle tilstand af styling-rullepaneler for den seneste, som du kan porte til en mixin.
Alligevel gør Chrome og Internet Explorer (ja) det muligt for os at definere brugerdefinerede stilarter til rullepaneler. Men syntaksen er forfærdeligt kompleks og selvfølgelig bestemt ikke standard. Velkommen til den proprietære verden. Dette er grunden til, at du måske vil have en lille mixin for nemt at tilpasse dine rullebjælker. Ret?
@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; ) )Anvendelse:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Eksempel
Se Pen Sass mixin for rullepanelstyling af Hugo Giraudel (@HugoGiraudel) på CodePen.
Går videre
I begge browsere er der mange flere muligheder end bare farve og størrelse. De overses dog ofte, så jeg synes ikke det er værd at overfyldte mixin med disse muligheder. Du er velkommen til at opbygge et mere avanceret mixin med ekstra muligheder.
Yderligere læsninger:
- Indbygget & tilpasset WebKit-rullepanel
- Brugerdefinerede rullepaneler i Webkit
- Brugerdefinerede rullepaneler til IE og Chrome ved hjælp af CSS