Dostosowywanie koloru lub grubości paska przewijania

Wygląd pasków przewijania możesz dostosować za pomocą standardowych właściwości CSS scrollbar-color i scrollbar-width.

• scrollbar-color: akceptuje 2 wartości <color>. Pierwszy dotyczy suwaka (części ruchomej), a drugi – ścieżki (stałego tła).
• scrollbar-width: akceptuje wartości auto (domyślna), thin (cieńszy wariant) lub none (całkowicie ukrywa pasek przewijania, zachowując możliwość przewijania).

Zastosuj scrollbar-color i scrollbar-width

OBOWIĄZKOWO: użyj scrollbar-color i scrollbar-width w kontenerze z możliwością przewijania.

Jeśli używasz scrollbar-color, używaj zmiennych CSS, aby oddzielić kolory suwaka i paska, co poprawi czytelność i ułatwi konserwację (zwłaszcza w przypadku korzystania z kreacji zastępczych).

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

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

Strategie zastępcze

Zastępcze i obsługiwane przez przeglądarki kolory paska przewijania

Ta funkcja jest progresywnym ulepszeniem i nie zawsze wymaga kreacji zastępczych.

Jeśli styl jest ważny, a docelowa wersja Baseline użytkownika to „Baseline Widely Available” lub wcześniejsza, POWINNO się uwzględnić niestandardowe pseudoelementy ::-webkit-scrollbar jako kreacje zastępcze.

Umieść starsze kreacje zastępcze w bloku @supports not (scrollbar-color: auto), aby uniknąć konfliktów między właściwościami standardowymi a starszymi selektorami WebKit w przeglądarkach, które obsługują oba te rozwiązania.

Jeśli do definiowania kolorów używasz właściwości niestandardowych, zostaną one automatycznie zastosowane do starszych selektorów WebKit. NIE musisz ich duplikować.

/* 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);
  }
}