Rullningsfärg - CSS-tricks

Anonim

Den scrollbar-coloregenskapen styr de två färgerna i en scrollbar: det tummen färg och spårfärg . scrollbar-coloringår i CSS-arbetsgruppens Scrollbars Module Level 1-utkast, som fortfarande skrivs.

Innan tidigare scrollbar-colorhade utvecklare inget vanligt sätt att ändra standardutseendet på en webbläsares rullningslister utan att behöva dölja rullningsfältet via overflow: hiddenoch rendera JavaScript-baserade rullningslister eller använda webbläsarförinställda rullningsattribut. Å scrollbar-colorandra sidan kan vi utforma ett rullningsfält så att det matchar en design utan att använda om webbläsarfunktionalitet eller använda leverantörsprefix.

.scrollable-element ( scrollbar-color: red yellow; )
Bli vild med anpassade färger

scrollbar-coloraccepterar också värden för darkoch för lightatt matcha en användares preferenser om de använder något som mörkt läge på Mac OSX.

.scrollable-element ( scrollbar-color: dark; )

Från och med mars 2019 finns inte stöd för darkoch lightvärden i någon webbläsare. stöds i Firefox. Se webbläsarens supportavsnitt nedan för mer information.

Syntax

scrollbar-color: auto | dark | light | ;

Värden

scrollbar-color accepterar följande värden:

  • auto är standardvärdet och ger standardrullningsfärgerna för användaragenten.
  • dark kommer att berätta användaragenten att använda mörkare rullningslister för att matcha det aktuella färgschemat.
  • light kommer att berätta användaragenten att använda lättare rullningslister för att matcha det aktuella färgschemat.
  • anger två färger som ska användas för rullningsfältet. Den första färgen är "tumme" eller den rörliga delen av rullningsfältet som visas ovanpå. Den andra färgen är för "spåret" eller den fasta delen av rullningsfältet.

Exempel

Detta kombinerar den nya specsyntaxen och de prefixade grejerna för WebKit.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
91 * 87 11 88 * TP *

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
88 * Nej 81 * 14,0-14,4 *

Relaterad

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Resurser

  • Det aktuella läget för styling av rullningsfält
  • Anpassade rullningsfält i WebKit
  • CSSWG Scrollbars Modulutkast
  • W3C samling av användningsfall för ändring av rullningslisten
  • Framtiden för CSS: Scrollbars on dev.to
  • Kromutgåva 891944