Como desabilitar o scroll de uma página web com JavaScript

Neste artigo você vai aprender a como desabilitar o scroll de uma página web com JavaScript, de uma forma simples e sem bibliotecas externas

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e o scroll!

Para remover o scroll precisamos apenas tirar o overflow do document, ou seja, colocá-lo como hidden

E isso pode ser facilmente feito com a propriedade style, veja um exemplo prático:

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';
    document.body.scroll = "no"; // IE
}

unloadScrollBars();

Note que a segunda linha da função é para o Internet Explorer

E veja também que a solução é muito simples, basta invocar a função

Caso você precise voltar o scroll para a página, pode utilizar a seguinte função:

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';
    document.body.scroll = "yes"; // IE
}

E assim voltamos o scroll normalmente a página

É interessante ressaltar que isso pode ser feito puramente por CSS, caso não exija uma intervenção de JS, como um evento, por exemplo

Veja a solução com CSS puro:

body {
 overflow: hidden;
}

É importante também salientar que remover a barra de scroll é um comportamento diferente do que o usuário está acostumado

Podendo fazer com que ele saia do seu site, já que você está mudando as opções padrões que o mesmo tem

Recomendo também a leitura deste artigo, que ensina como desabilitar um input de texto com JavaScript

Conclusão

Neste artigo vimos como desabilitar o scroll de uma página web com JavaScript

Basicamente adicionamos a propriedade de overflow com valor de hidden, fazendo com que o resto do site não seja exibido

O que pode ser feito facilmente também com CSS, que é o mais indicado

Pois a regra é feita puramente no estilo da página, não há necessidade de intervenção de JavaScript

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