Manipulando a scrollbar com CSS: como esconder, estilizar e mais

César Canteiro — Thu, 27 Feb 2025 20:18:58 +0000

A scrollbar (barra de rolagem) de um site é aquele elemento na lateral que mostra em que ponto do página o usuário está. Ela pode ser usada tanto no eixo X quanto no Y, e pode ser manipulada de diversas formas usando apenas CSS.

História e evolução da scrollbar nos navegadores

Neste post, você aprenderá a:

Esconder a scrollbar sem desativar a rolagem;
Personalizar a aparência da scrollbar;
Modificar o comportamento da rolagem;
Tornar a rolagem mais suave.

Anatomia de uma scrollbar. Todos os tipos de ajustes e estilizações via CSS

1. Como esconder a scrollbar sem desativar o scroll

Se deseja ocultar a scrollbar, mas ainda permitir a rolagem do conteúdo, use as seguintes regras CSS:

Para navegadores modernos (Chrome, Edge, Safari):

CSS

.elemento::-webkit-scrollbar {
    display: none;
}

CSS

Para Firefox:

CSS

.elemento {
    scrollbar-width: none;
}

CSS

Para Internet Explorer e Edge antigo:

CSS

.elemento {
    -ms-overflow-style: none;
}

CSS

Com essas configurações, a barra de rolagem ficará invisível, mas o usuário ainda poderá rolar o conteúdo.

2. Como estilizar e personalizar a scrollbar

Se quiser estilizar a barra de rolagem em navegadores baseados em WebKit (Chrome, Safari, Edge), utilize os seguintes seletores:

CSS

.elemento::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.elemento::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.elemento::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.elemento::-webkit-scrollbar-thumb:hover {
    background: #555;
}

CSS

Explicação:

::-webkit-scrollbar → Define o tamanho da scrollbar.
::-webkit-scrollbar-track → Define a área de fundo da scrollbar.
::-webkit-scrollbar-thumb → Define o “botão” que o usuário arrasta.
::-webkit-scrollbar-thumb:hover → Estiliza a scrollbar ao passar o mouse.

📌 Observação: o Firefox permite personalizar apenas a largura usando scrollbar-width, mas não oferece suporte a cores ou outros estilos avançados.

3. Como fazer a rolagem suave

Caso queira que a rolagem seja mais fluida, adicione este CSS:

CSS

html {
    scroll-behavior: smooth;
}

CSS

Isso faz com que os links internos da página rolem suavemente até o destino, ao invés de saltar diretamente.

4. Como criar uma scrollbar oculta que aparece ao passar o mouse

Se deseja esconder a scrollbar e mostrá-la apenas quando o usuário passar o mouse sobre o elemento, utilize:

CSS

.elemento::-webkit-scrollbar {
    width: 0px;
}

.elemento:hover::-webkit-scrollbar {
    width: 8px;
}

CSS

Manipular a scrollbar pode melhorar muito a experiência do usuário, deixando o design mais limpo e elegante. Com essas técnicas, você pode ocultar, personalizar e até tornar a rolagem mais fluida.

Se quiser desennvolver um site de sucesso, com todas as prtemissas para SEO, UX e conversão, entre em contatos com os ratos do desenvolvimento web! 🚀

O post Manipulando a scrollbar com CSS: como esconder, estilizar e mais apareceu primeiro em Pink and Brain.

Conteúdos sobre Web Design | Pink and Brain