Como remover o scroll da página (CSS)

Neste artigo veremos uma forma prática e fácil para remover o scroll da página, utilizando apenas uma regra de CSS, sem JavaScript.

Fala programador(a), beleza? Bora aprender coisa nova!

As vezes precisamos travar o scroll da página, para limitar a ação do usuário, por exemplo quando queremos mostrar um pop up

Aí o usuário deve focar neste pop up e perder acesso a outras ações da página, como o scroll

E para nossa alegria, com CSS, é muito fácil de tirar a funcionalidade do scroll da tela

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Apenas precisamos utilizar a regra de overflow no body com o valor de hidden

A propriedade overflow controla como o conteúdo que passa da tela do usuário é exibido, caso fique com o valor de hidden ele passa a ser oculdo

Ou seja, o navegador entende que não tem nada além da tela e esconde scroll bar

Veja um exemplo funcional:

html, body {
 overflow: hidden;
}

Com esta regra aplicada, o scroll da página não vai mais funcionar da maneira que deveria

E impedir o usuário de scrollar pela página 🙂

Obs: Utilize isso apenas em casos extremamente necessários, retirar comportamentos já conhecido do usuário de uma página pode fazer ele nunca mais voltar ao seu site! 

Conclusão

Neste artigo vimos como remover o scroll da página com a propriedade overflow adicionada ao body, com o valor de hidden

Isso fará o HTML entender que não há conteúdo além do que aparece na tela e remove a funcionalidade de scroll

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube