scrollbar-colorĪpašums kontrolē divas krāsas kādas ritjoslas: no īkšķa krāsu un dziesmu krāsu . scrollbar-colorir daļa no CSS darba grupas Ritjoslu moduļa 1. līmeņa projekta, kas šajā rakstā joprojām tiek turpināts.
Pirms tam scrollbar-colorizstrādātājiem nebija standarta veida, kā mainīt pārlūkprogrammas ritjoslu noklusējuma izskatu, neizmantojot ritināšanas joslas slēpšanu, izmantojot overflow: hiddenun balstot uz JavaScript balstītas ritjoslas, vai izmantojot pārlūkprogrammas prefiksu ritjoslas atribūtus. No scrollbar-colorotras puses, mēs varam veidot ritināšanas joslas stilu, lai tas atbilstu dizainam, neizmantojot pārlūkprogrammas funkcionalitāti vai izmantojot pārdevēja prefiksus.
.scrollable-element ( scrollbar-color: red yellow; )
scrollbar-colorpieņems arī lietotāja preferenču vērtības darkun lightatbilst tām, ja viņi Mac OSX izmanto kaut ko līdzīgu tumšajam režīmam.
.scrollable-element ( scrollbar-color: dark; )Sākot ar 2019. gada martu, atbalsts darkun lightvērtības nav pieejams nevienā pārlūkprogrammā. tiek atbalstīts pārlūkprogrammā Firefox. Sīkāku informāciju skatiet pārlūkprogrammas atbalsta sadaļā.
Sintakse
scrollbar-color: auto | dark | light | ;Vērtības
scrollbar-color pieņem šādas vērtības:
autoir noklusējuma vērtība un padarīs lietotāja aģenta standarta ritjoslas krāsas.darkliks lietotāja aģentam izmantot tumšākas ritjoslas, lai tās atbilstu pašreizējai krāsu shēmai.lightliks lietotāja aģentam izmantot vieglākas ritjoslas, lai tās atbilstu pašreizējai krāsu shēmai.norāda divas krāsas, kas jāizmanto ritjoslai. Pirmā krāsa ir “īkšķim” vai ritināmās joslas kustīgajai daļai, kas parādās augšpusē. Otrā krāsa ir paredzēta “celiņam” vai ritināšanas joslas fiksētajai daļai.
Piemērs
Tas apvieno jauno spec sintaksi un WebKit prefiksu saturu.
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 91 * | 87 | 11 | 88 * | TP * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | Nē | 81 * | 14,0–14,4 * |
Saistīts
scrollbar-gutterscrollbar-widthscrollbar
Resursi
- Ritjoslu pašreizējais stāvoklis
- Pielāgotas ritjoslas WebKit
- CSSWG ritjoslu moduļa melnraksts
- W3C lietošanas gadījumu kolekcija ritjoslas modifikācijai
- CSS nākotne: ritjoslas vietnē dev.to
- Hroma izdevums 891944
