Como - Ocultar a barra de rolagem
Aprenda como ocultar barras de rolagem com CSS.
Como ocultar barras de rolagem
Adicionar overflow: hidden;
para ocultar a barra de rolagem horizontal e vertical.
Exemplo
body {
overflow: hidden; /* Hide scrollbars */
}
Para ocultar apenas a barra de rolagem vertical ou apenas a barra de rolagem horizontal, use overflow-y
ou overflow-x
:
Exemplo
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Observe que overflow: hidden
também removerá a funcionalidade da barra de rolagem. Não é possível rolar dentro da página.
Dica: para saber mais sobre a overflow
propriedade, acesse nosso Tutorial CSS Overflow ou Referência de propriedade CSS overflow .
Ocultar barras de rolagem, mas manter a funcionalidade
Para ocultar as barras de rolagem, mas ainda poder continuar rolando, você pode usar o seguinte código:
Exemplo
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Os navegadores Webkit, como Chrome, Safari e Opera, suportam o ::-webkit-scrollbar
pseudo elemento não padrão, que nos permite modificar a aparência da barra de rolagem do navegador. O IE e o Edge suportam a -ms-overflow-style:
propriedade, e o Firefox suporta a scrollbar-width
propriedade, o que nos permite ocultar a barra de rolagem, mas manter a funcionalidade.