scrollbar-colorNieruchomość kontroluje dwa kolory do przewijania: w kolorze kciuka i koloru toru . scrollbar-colorjest częścią szkicu modułu Scrollbars Module Level 1 Grupy Roboczej CSS, który jest nadal w toku w chwili pisania tego tekstu.
Wcześniej scrollbar-colorprogramiści nie mieli standardowego sposobu zmiany domyślnego wyglądu pasków przewijania przeglądarki bez uciekania się do ukrywania paska przewijania overflow: hiddeni renderowania pasków przewijania opartych na JavaScript lub używania atrybutów paska przewijania z prefiksem przeglądarki. Z scrollbar-colordrugiej strony możemy stylizować pasek przewijania tak, aby pasował do projektu bez konieczności ponownego modyfikowania funkcjonalności przeglądarki lub używania prefiksów dostawców.
.scrollable-element ( scrollbar-color: red yellow; )
scrollbar-colorzaakceptuje również wartości darki lightbędzie pasować do preferencji użytkownika, jeśli używa on czegoś w rodzaju trybu ciemnego w systemie Mac OSX.
.scrollable-element ( scrollbar-color: dark; )Od marca 2019 r. Obsługa darki lightwartości nie jest dostępna w żadnej przeglądarce. jest obsługiwany w przeglądarce Firefox. Aby uzyskać szczegółowe informacje, zapoznaj się z sekcją dotyczącą obsługi przeglądarek poniżej.
Składnia
scrollbar-color: auto | dark | light | ;Wartości
scrollbar-color akceptuje następujące wartości:
autojest wartością domyślną i będzie renderować standardowe kolory paska przewijania dla klienta użytkownika.darkpowie programowi użytkownika, aby używał ciemniejszych pasków przewijania w celu dopasowania do bieżącego schematu kolorów.lightpowie programowi użytkownika, aby używał jaśniejszych pasków przewijania, aby dopasować się do bieżącego schematu kolorów.określa dwa kolory, które mają być używane na pasku przewijania. Pierwszy kolor dotyczy „kciuka” lub ruchomej części paska przewijania, która pojawia się na górze. Drugi kolor dotyczy „ścieżki” lub stałej części paska przewijania.
Przykład
Łączy to nową składnię specyfikacji i elementy z prefiksem WebKit.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 91 * | 87 | 11 | 88 * | TP * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | Nie | 81 * | 14, 0-14, 4 * |
Związane z
scrollbar-gutterscrollbar-widthscrollbar
Zasoby
- Bieżący stan stylizacji pasków przewijania
- Niestandardowe paski przewijania w oprogramowaniu WebKit
- Wersja robocza modułu CSSWG Scrollbars
- Kolekcja W3C przypadków użycia do modyfikacji paska przewijania
- Przyszłość CSS: Scrollbars na dev.to
- Chromium, wydanie 891944