Gerador de barra de rolagem CSS

Propriedades padrão modernas (2023 em diante)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Compatibilidade dos navegadores (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Reserva o espaço da barra de rolagem mesmo quando ela não é necessária, evitando deslocamentos no layout.

Pseudoelementos do webkit (Chrome, Safari, Edge mais antigo)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Um controle mais detalhado. width define a largura da barra de rolagem vertical; height define a altura da horizontal. Adicione as duas para contêineres que podem rolar em qualquer direção.

Combine as duas abordagens em cascata

Especifique primeiro as regras modernas e depois o webkit como aprimoramento para os navegadores que interpretam as duas:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

O Firefox respeita apenas as regras modernas scrollbar-*. O Chrome e o Safari respeitam as regras do webkit (que substituem as modernas, mantendo o comportamento consistente).

scrollbar-gutter evita o deslocamento do conteúdo

Sem um espaço reservado, o conteúdo se rearranja quando surge uma barra de rolagem (comum em listas dinâmicas). Solução:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

O espaço da barra de rolagem fica reservado independentemente de o conteúdo rolar ou não. both-edges adiciona um espaço equivalente no lado oposto para manter o conteúdo visualmente centralizado.

Ocultar as barras de rolagem por completo

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Cuidado: ocultar a barra de rolagem impede que os usuários percebam que o conteúdo pode rolar. Use apenas com um indicador claro (setas, pontos de página) ou quando a rolagem for evidente pelo contexto (carrosséis horizontais, históricos de conversa).

Considerações para dispositivos móveis

No iOS e no Android, as barras de rolagem só aparecem por um instante durante a rolagem. Seu CSS de barra personalizada continua sendo aplicado, mas os usuários talvez nunca o vejam por mais de um segundo. Projete de acordo: não invista demais em detalhes visuais que raramente aparecem.

Acessibilidade

• Contraste: o cursor em relação ao trilho deve atingir 3:1 para contraste não textual (WCAG 1.4.11).
• Largura: barras de rolagem finas podem ser difíceis de segurar com o mouse, sobretudo para usuários com deficiências motoras. A largura normal é um padrão mais seguro.
• Nunca remova a barra de rolagem em regiões roláveis sem oferecer outro meio de rolagem. Usuários que dependem da barra ficarão presos.