Schuifbalk-kleur - CSS-trucs

Anonim

De scrollbar-coloreigenschap bepaalt de twee kleuren van een schuifbalk: de duimkleur en de trackkleur . scrollbar-colormaakt deel uit van het concept Scrollbars Module Level 1 van de CSS-werkgroep, dat op het moment van schrijven nog steeds in uitvoering is.

Voordien scrollbar-colorhadden ontwikkelaars geen standaardmanier om het standaard uiterlijk van de schuifbalken van een browser te veranderen zonder hun toevlucht te nemen tot het verbergen van de schuifbalk via overflow: hiddenJavaScript-gebaseerde schuifbalken of het gebruik van door de browser vooraf ingestelde schuifbalkattributen. Met scrollbar-color, aan de andere kant, kunnen we een schuifbalk zo opmaken dat het overeenkomt met een ontwerp zonder onze browserfunctionaliteit opnieuw uit te voeren of leveranciersvoorvoegsels te gebruiken.

.scrollable-element ( scrollbar-color: red yellow; )
Ga uit je dak met aangepaste kleuren

scrollbar-coloraccepteert ook waarden van darken lightom overeen te komen met de voorkeuren van een gebruiker als ze zoiets als de donkere modus gebruiken op Mac OSX.

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

Vanaf maart 2019 is ondersteuning voor darken lightwaarden in geen enkele browser beschikbaar. wordt ondersteund in Firefox. Zie het gedeelte over browserondersteuning hieronder voor details.

Syntaxis

scrollbar-color: auto | dark | light | ;

Waarden

scrollbar-color accepteert de volgende waarden:

  • auto is de standaardwaarde en geeft de standaard schuifbalkkleuren weer voor de user agent.
  • dark zal de user-agent vertellen om donkere schuifbalken te gebruiken die passen bij het huidige kleurenschema.
  • light zal de user-agent vertellen om lichtere schuifbalken te gebruiken die passen bij het huidige kleurenschema.
  • specificeert twee kleuren die moeten worden gebruikt voor de schuifbalk. De eerste kleur is voor de "duim" of het beweegbare deel van de scrollbar dat bovenaan verschijnt. De tweede kleur is voor de "track" of het vaste gedeelte van de schuifbalk.

Voorbeeld

Dit combineert de nieuwe spec-syntaxis en de WebKit-voorvoegsels.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
91 * 87 11 88 * TP *

Mobiel / tablet

Android Chrome Android Firefox Android iOS Safari
88 * Nee 81 * 14.0-14.4 *

Verwant

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Middelen

  • De huidige staat van styling schuifbalken
  • Aangepaste schuifbalken in WebKit
  • CSSWG Scrollbars Module concept
  • W3C verzameling use-cases voor schuifbalkmodificatie
  • Toekomst van CSS: schuifbalken op dev.to
  • Chromium-nummer 891944