Scrollbar

Scrollbar minimalista com linha de 2px e caps arredondados. Oculta por padrão, aparece ao passar o mouse sobre o conteúdo. Dark mode automático via tokens semânticos.

components/scrollbar.cssAbrir no Figma

Exemplos

Passe o mouse sobre o conteúdo para ver a scrollbar aparecer.

Carregando exemplo...

Propriedades

Classes disponíveis para configurar a scrollbar.

Propriedade	Tipo	Default	Descrição
.custom-scroll	classe	—	Aplica scrollbar customizada ao container. Oculta por padrão, visível no hover.
.scroll-y	classe	—	Scroll apenas vertical.
.scroll-x	classe	—	Scroll apenas horizontal.
.scroll-hidden	classe	—	Esconde a scrollbar mantendo a funcionalidade de scroll.

Código

Snippets prontos para copiar e usar no seu projeto.

Scroll vertical

<div class="custom-scroll scroll-y" style="height: 200px;">
    <!-- Conteúdo longo -->
</div>

Scroll horizontal

<div class="custom-scroll scroll-x">
    <!-- Conteúdo largo -->
</div>

Esconder scrollbar

<div class="scroll-hidden" style="height: 200px; overflow: auto;">
    <!-- Scroll funciona mas barra fica invisível -->
</div>

Tokens utilizados

Variáveis semânticas aplicadas ao componente.

Token	Uso
--border-base-neutral-default	Cor do thumb padrão
--border-base-neutral-strong	Cor do thumb ativo (hover/drag)

Versão3.0.0

Última atualização2026-03-18

Caminhocomponentes/scrollbar.md