A scrollbar-colortulajdonság vezérli a gördítősáv két színét: a hüvelykujj és a sáv színét . scrollbar-colorrésze a CSS munkacsoport Scrollbars moduljának 1. szintű tervezetének, amely az írás során még folyamatban van.
Korábban a scrollbar-colorfejlesztőknek nem volt szokásos módjuk a böngésző gördítősávjainak alapértelmezett megjelenésének megváltoztatására anélkül, hogy a gördítősáv elrejtését overflow: hiddenés a JavaScript-alapú gördítősávok renderelését, vagy a böngésző előtagolt gördítősáv-attribútumok használatát igényelték volna. Az scrollbar-color, másrészt, akkor stílus görgetősáv, hogy megfeleljen a tervezési, anélkül, hogy redoing böngésző működését vagy a gyártó előtagokat.
.scrollable-element ( scrollbar-color: red yellow; )
scrollbar-coloris el fog fogadni értékeit darkés lighthogy megfeleljen a felhasználó beállításait, ha ők használ valamit, mint a sötét mód Mac OSX.
.scrollable-element ( scrollbar-color: dark; )2019 márciusától a böngészőben nem érhető el támogatás darkés lightértékek. a Firefox támogatja. A részletekért lásd az alábbi böngészőtámogatási részt.
Szintaxis
scrollbar-color: auto | dark | light | ;Értékek
scrollbar-color a következő értékeket fogadja el:
autoaz alapértelmezett érték, és megjeleníti a gördítősáv szokásos színeit a felhasználói ügynöknél.darkmeg fogja mondani a felhasználói ügynöknek, hogy sötétebb gördítősávokat használjon az aktuális színösszeállításhoz.lightmeg fogja mondani a felhasználói ügynöknek, hogy az aktuális színvilágnak megfelelő könnyebb gördítősávokat használjon.két színt határoz meg a gördítősávhoz. Az első szín a „hüvelykujj” vagy a gördítősáv tetején megjelenő mozgatható része. A második szín a „pálya” vagy a gördítősáv rögzített része.
Példa
Ez egyesíti az új specifikációs szintaxist és a WebKit előtagokat.
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 91 * | 87 | 11. | 88 * | TP * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | Nem | 81 * | 14,0–14,4 * |
Összefüggő
scrollbar-gutterscrollbar-widthscrollbar
Erőforrások
- A gördítősávok jelenlegi állapota
- Egyéni gördítősávok a WebKitben
- CSSWG gördítősávok vázlata
- W3C felhasználási esetek gyűjteménye a gördítősáv módosításához
- A CSS jövője: Gördítősávok a dev.to oldalon
- Krómszám: 891944