De kleur of dikte van een scrollbalk aanpassen

Je kunt het uiterlijk van schuifbalken aanpassen met de standaard CSS-eigenschappen scrollbar-color en scrollbar-width.

• scrollbar-color: Accepteert 2 <color>-waarden. De eerste is van toepassing op de duim (het bewegende deel) en de tweede op de track (de vaste achtergrond).
• scrollbar-width: Accepteert auto (standaard), thin (een dunnere variant) of none (verbergt de scrollbalk volledig, maar behoudt de mogelijkheid om te scrollen).

scrollbar-color en scrollbar-width toepassen

VERPLICHT: Gebruik scrollbar-color en scrollbar-width voor de scrollbare container.

Als je scrollbar-color gebruikt, gebruik je CSS-variabelen om de kleuren van de duim en het spoor gescheiden te houden, voor leesbaarheid en onderhoudbaarheid (vooral als je fallbacks gebruikt).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

Reservestrategieën

Fallbacks en browserondersteuning voor scrollbar-color

Deze functie is een progressive enhancement en vereist niet altijd fallbacks.

Als de stijl belangrijk is en het Baseline-doel van de gebruiker Baseline Algemeen beschikbaar of eerder is, MOET je de niet-standaard pseudo-elementen ::-webkit-scrollbar opnemen als fallbacks.

Plaats verouderde fallbacks in een @supports not (scrollbar-color: auto)-blok om conflicten te voorkomen tussen standaardproperty's en verouderde WebKit-selectors in browsers die beide systeemeigen ondersteunen.

Als u aangepaste eigenschappen gebruikt om kleuren te definiëren, worden deze automatisch overgenomen door de verouderde WebKit-selectors. U hoeft ze NIET te dupliceren.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}