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
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