Scrollbar-color - CSS-Tricks

Anonim

A scrollbar-colorpropriedade controla as duas cores de uma barra de rolagem: a cor da miniatura e a cor da trilha . scrollbar-colorfaz parte do rascunho do Módulo Barras de Rolagem Nível 1 do Grupo de Trabalho CSS, que ainda é um trabalho em andamento no momento da redação deste documento.

Antes scrollbar-color, os desenvolvedores não tinham uma maneira padrão de alterar a aparência padrão das barras de rolagem de um navegador sem recorrer à ocultação da barra de rolagem overflow: hiddene renderização de barras de rolagem baseadas em JavaScript ou usando atributos de barra de rolagem prefixados do navegador. Com scrollbar-color, por outro lado, podemos estilizar uma barra de rolagem para corresponder a um design sem recorrer a refazer a funcionalidade do navegador ou usar prefixos de fornecedor.

.scrollable-element ( scrollbar-color: red yellow; )
Enlouqueça com cores personalizadas

scrollbar-colortambém aceitará valores de darke lightpara corresponder às preferências de um usuário se ele estiver usando algo como o modo escuro no Mac OSX.

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

Desde março de 2019, o suporte para darke os lightvalores não estão disponíveis em nenhum navegador. é compatível com o Firefox. Consulte a seção de suporte do navegador abaixo para obter detalhes.

Sintaxe

scrollbar-color: auto | dark | light | ;

Valores

scrollbar-color aceita os seguintes valores:

  • auto é o valor padrão e renderizará as cores da barra de rolagem padrão para o agente do usuário.
  • dark dirá ao agente do usuário para usar barras de rolagem mais escuras para combinar com o esquema de cores atual.
  • light dirá ao agente do usuário para usar barras de rolagem mais claras para combinar com o esquema de cores atual.
  • especifica duas cores a serem usadas para a barra de rolagem. A primeira cor é para o “polegar” ou a parte móvel da barra de rolagem que aparece no topo. A segunda cor é para a “trilha” ou a parte fixa da barra de rolagem.

Exemplo

Isso combina a nova sintaxe de especificação e as coisas prefixadas do WebKit.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
91 * 87 11 88 * TP *

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 * Não 81 * 14,0-14,4 *

Relacionado

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Recursos

  • O estado atual das barras de rolagem de estilo
  • Barras de rolagem personalizadas no WebKit
  • Rascunho do módulo de barras de rolagem CSSWG
  • Coleção W3C de casos de uso para modificação da barra de rolagem
  • Futuro do CSS: barras de rolagem em dev.to
  • Chromium Issue 891944