Paski przewijania są jednym z tych elementów interfejsu użytkownika, które są obecne na prawie każdej stronie w Internecie, ale my (programiści) nie mamy nad nim kontroli. Niektóre przeglądarki dają nam możliwość dostosowania ich wyglądu, ale w większości przeglądarek, w tym Firefox, jest to po prostu niemożliwe.
Wprowadzono pewne aktualizacje i standaryzację stylizacji pasków przewijania. Zobacz Bieżący stan stylizowanych pasków przewijania, aby zapoznać się z najnowszymi wersjami, które można przenieść do miksu.
Mimo to Chrome i Internet Explorer (tak) umożliwiają nam definiowanie niestandardowych stylów pasków przewijania. Jednak składnia jest potwornie złożona i oczywiście zdecydowanie niestandardowa. Witamy w zastrzeżonym świecie. Dlatego możesz chcieć trochę mieszać, aby łatwo dostosować paski przewijania. Dobrze?
@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; ) )Stosowanie:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Przykład
Zobacz mixin Pen Sass do stylizacji paska przewijania autorstwa Hugo Giraudela (@HugoGiraudel) na CodePen.
Idąc dalej
W obu przeglądarkach dostępnych jest znacznie więcej opcji niż tylko kolor i rozmiar. Jednak są one często pomijane, więc nie sądzę, aby warto było przepełniać mieszankę tymi opcjami. Zapraszam do stworzenia bardziej zaawansowanej mieszanki z dodatkowymi opcjami.
Dalsze lektury:
- Wstawiony i dostosowany pasek przewijania WebKit
- Niestandardowe paski przewijania w Webkit
- Niestandardowe paski przewijania dla IE i Chrome przy użyciu CSS