Personalizar a cor ou a espessura de uma barra de rolagem

É possível personalizar a aparência das barras de rolagem usando as propriedades CSS padrão scrollbar-color e scrollbar-width.

• scrollbar-color: aceita dois valores <color>. O primeiro se aplica ao controle deslizante (a parte móvel) e o segundo à faixa (o plano de fundo fixo).
• scrollbar-width: aceita auto (padrão), thin (uma variante mais fina) ou none (oculta completamente a barra de rolagem, mas mantém a capacidade de rolagem).

Aplicar scrollbar-color e scrollbar-width

OBRIGATÓRIO: use scrollbar-color e scrollbar-width no contêiner rolável.

Ao usar scrollbar-color, use variáveis CSS para manter as cores do controle deslizante e da barra separadas, para facilitar a leitura e a manutenção (especialmente ao usar substitutos).

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

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

Estratégias de fallback

Alternativas e suporte do navegador para scrollbar-color

Esse recurso é um aprimoramento progressivo e nem sempre requer substitutos.

Se o estilo for importante e o destino do usuário for "Baseline Widely Available" ou anterior, inclua os pseudoelementos ::-webkit-scrollbar não padrão como substitutos.

Envolva os substitutos legados em um bloco @supports not (scrollbar-color: auto) para evitar conflitos entre propriedades padrão e seletores WebKit legados em navegadores que oferecem suporte nativo a ambos.

Se você estiver usando propriedades personalizadas para definir cores, elas serão aplicadas automaticamente aos seletores legados do WebKit. NÃO é necessário duplicá-los.

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