Largura da barra de rolagem - CSS-Tricks

Anonim

A scrollbar-widthpropriedade em CSS controla a largura ou “espessura” de uma barra de rolagem. scrollbar-widthfaz parte do rascunho do Módulo Barras de Rolagem Nível 1 do Grupo de Trabalho CSS, que ainda é um trabalho em andamento. O consenso no momento da redação deste artigo é que scrollbar-widthprovavelmente será incluído em versões futuras do CSS, mas há um debate se um argumento variável será permitido ou se as opções serão limitadas a valores predefinidos (mais sobre isso posteriormente) .

Ajustar a largura da barra de rolagem é particularmente importante em páginas ou interfaces de usuário com espaço limitado, onde cortar apenas alguns pixels da barra de rolagem (ou removê-la completamente) pode dar ao conteúdo espaço suficiente para respirar, sem remover a capacidade de rolar.

Por exemplo, imagine uma interface de edição de texto em que precisa caber em um contêiner curto e estreito. Em tal situação, a barra de rolagem pode ocupar muito do espaço disponível:

com scrollbar-width: auto;

Com scrollbar-width, podemos definir a largura thinpara economizar espaço:

.scrollable-element ( scrollbar-width: thin; )
textarea com scrollbar-width: thin;

Ou podemos definir a largura para noneremovê-lo totalmente, economizando ainda mais espaço (assumindo que estamos OK com a barra de rolagem desaparecendo):

.scrollable-element ( scrollbar-width: none; )
textareacom scrollbar-width: none;- e você ainda pode rolar!

Sintaxe

scrollbar-width: auto | thin | none | ;

Valores

scrollbar-width aceita os seguintes valores:

  • auto é o valor padrão e renderizará as barras de rolagem padrão para o agente do usuário.
  • thin dirá ao agente do usuário para usar barras de rolagem mais finas, quando aplicável.
  • none irá ocultar a barra de rolagem completamente, sem afetar a capacidade de rolagem do elemento.
  • está sendo debatido, mas (se adicionado) teria uma largura máxima da barra de rolagem.

Exemplo

Suporte para navegador

Isso é para personalização geral das barras de rolagem. Para sua melhor aposta estilizando um navegador cruzado de barra de rolagem, veja aqui.

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-color
  • scrollbar

Recursos

  • 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
  • w3c Github discussão sobre controle de largura da barra de rolagem