scrollbar-color
Vlastnosť ovláda dve farby posuvníka: v farbe palca a farby stopy . scrollbar-color
je súčasťou konceptu Scrollbars Module úrovne 1 pracovnej skupiny CSS, ktorý je od tohto písania stále nedokončenou prácou.
Predtým scrollbar-color
vývojári nemali štandardný spôsob, ako zmeniť predvolený vzhľad posuvných pruhov prehľadávača, bez toho aby sa uchýlili k skrytiu posuvného pruhu pomocou overflow: hidden
a vykresľovaniu posuvných pruhov založených na skripte JavaScript alebo k použitiu atribútov posuvného pruhu s predponou. S scrollbar-color
, na druhú stranu, môžeme štýl posuvník tak, aby zodpovedala dizajnu, bez toho aby sa uchyľovať k prerobenie funkčnosť prehliadača alebo pomocou dodávateľa predpony.
.scrollable-element ( scrollbar-color: red yellow; )


scrollbar-color
bude tiež akceptovať hodnoty dark
a light
zodpovedať preferenciám používateľa, ak používa v systéme Mac OSX niečo ako tmavý režim.
.scrollable-element ( scrollbar-color: dark; )
Od marca 2019 nie je podpora dark
a light
hodnoty k dispozícii v žiadnom prehliadači. je podporovaný vo Firefoxe. Podrobnosti nájdete v sekcii podpory prehliadača nižšie.
Syntax
scrollbar-color: auto | dark | light | ;
Hodnoty
scrollbar-color
akceptuje nasledujúce hodnoty:
auto
je predvolená hodnota a vykreslí štandardné farby posuvníka pre agenta používateľa.dark
povie užívateľskému agentovi, aby používal tmavšie posuvníky, aby sa zhodovali s aktuálnou farebnou schémou.light
povie užívateľskému agentovi, aby používal svetlejšie posuvníky, ktoré zodpovedajú aktuálnej farebnej schéme.určuje dve farby, ktoré sa majú použiť pre posuvný panel. Prvá farba je pre „palec“ alebo pohyblivú časť posuvného pruhu, ktorý sa zobrazuje na vrchu. Druhá farba je pre „stopu“ alebo pevnú časť posuvného pruhu.


Príklad
Toto kombinuje novú syntax špecifikácie a predponu WebKit.
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
Chrome | Firefox | IE | Hrana | Safari |
---|---|---|---|---|
91 * | 87 | 11 | 88 * | TP * |
Mobil / tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 * | Nie | 81 * | 14,0 - 14,4 * |
Súvisiace
scrollbar-gutter
scrollbar-width
scrollbar
Zdroje
- Aktuálny stav posúvačov štýlu
- Vlastné posúvače v aplikácii WebKit
- Návrh modulu CSSWG Scrollbars
- Zbierka prípadov použitia W3C na úpravu posuvného pruhu
- Budúcnosť CSS: Posuvníky na dev.to
- Chrómové vydanie 891944