Como impedir o scroll no body com JavaScript

Neste artigo você vai aprender a como impedir o scroll no body, ou seja, desabilitar o scroll na página com JavaScript

Fala programador(a), beleza? Bora aprender mais sobre o scroll da página!

Para excluir a funcionalidade de scroll precisamos lidar com CSS, o bom é que vamos alterar o CSS via JavaScript

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Basicamente precisamos alterar a propriedade overflow e position, isso já é o suficiente

Podemos fazer isso através de uma classe adicionada no body

Veja um exemplo:

.no-scroll {
    overflow: hidden;
    position: fixed;
}

Essa é a nossa classe, vejam os valores das propriedades de CSS

Agora precisamos adicionar isso ao nosso HTML via JS

É possível realizar através de uma função a adição de classe:

function disableScroll() {
	document.body.classList.add("no-scroll")
}

disableScroll()

Você pode associar a um evento também, para que a classe seja adicionada após um modal ser exibido, por exemplo

Conclusão

No artigo de hoje você viu como impedir o scroll no body

Utilizamos uma classe de CSS no body para isso

A classe foi adicionada através de uma função de JavaScript, você pode atribuir a um evento também

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos