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

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

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

E por que a página "pula" quando eu escondo o scroll?

Se liga nisso, porque é o efeito colateral que mais pega gente de surpresa

Quando você joga o overflow pra hidden, a barra de rolagem some e devolve pro layout aquele espacinho que ela ocupava

Resultado: o conteúdo dá um salto pro lado no exato momento em que você trava o scroll, e parece bug 😀

A saída é medir quanto de espaço a barra ocupava e devolver esse espaço como padding antes de esconder

function travarScroll() {
const larguraDaBarra = window.innerWidth - document.documentElement.clientWidth
document.body.style.paddingRight = larguraDaBarra + 'px'
document.documentElement.style.overflow = 'hidden'
}

function destravarScroll() {
document.documentElement.style.overflow = 'auto'
document.body.style.paddingRight = ''
}

A conta é simples: window.innerWidth conta a janela inteira, clientWidth conta só a área útil

A diferença entre os dois é exatamente a barra de rolagem

Quando não tem barra na tela, a diferença dá zero e o padding nem entra, então a função funciona nos dois casos sem if extra

Tome cuidado ao limpar depois: devolva o paddingRight pra string vazia, e não pra 0px, pra não sobrescrever um padding que o seu CSS já definia

E no celular, por que a página continua rolando?

Aqui mora a parte que mais envelheceu desde que esse truque virou padrão na web

Naquela época a régua era desktop, hoje boa parte do acesso vem do toque, e só o overflow: hidden no documento pode não segurar a rolagem por toque

O jeito mais confiável é tirar o corpo do fluxo e guardar a posição em que o usuário estava

let posicaoSalva = 0

function travarScroll() {
posicaoSalva = window.scrollY
document.body.style.position = 'fixed'
document.body.style.top = `-${posicaoSalva}px`
document.body.style.width = '100%'
}

function destravarScroll() {
document.body.style.position = ''
document.body.style.top = ''
document.body.style.width = ''
window.scrollTo(0, posicaoSalva)
}

O porquê antes do como: position: fixed congela o corpo na tela, aí a rolagem por toque não tem pra onde ir

Mas ele também joga a página de volta pro topo, e é por isso que a gente salva o window.scrollY antes e restaura no final com window.scrollTo

Sem essa parte de restaurar, o usuário fecha o modal e se perde no meio do artigo, o que é bem pior que a barrinha aparecendo

Já me ferrei uma vez esquecendo o width: 100%: sem ele, o corpo encolhe e o layout inteiro se reorganiza na frente do usuário

Melhor ainda: junte os dois com uma classe

O post mostra a via do JavaScript e a via do CSS, mas dá pra usar as duas juntas, e essa costuma ser a versão mais limpa

A ideia é deixar a regra morando no CSS e usar o JavaScript só pra ligar e desligar essa regra

.sem-scroll {
overflow: hidden;
}

// trava
document.documentElement.classList.add('sem-scroll')

// destrava
document.documentElement.classList.remove('sem-scroll')

// alterna
document.documentElement.classList.toggle('sem-scroll')

Se você já mexeu com qualquer framework de front, isso vai parecer familiar: é a mesma ideia de estado no CSS e gatilho no JS

A vantagem prática é que o estilo fica num lugar só

Quer amanhã compensar a barra ou travar também o html? Você mexe na classe e todo mundo que usa ela ganha o ajuste de graça, sem caçar style inline espalhado pelo código 🙂

Erros comuns na hora de travar o scroll:

Juntei aqui os tropeços que aparecem sempre, pra você não descobrir em produção

Travar e nunca destravar

Se o modal fecha por tecla, por clique fora ou por rota, cada uma dessas saídas precisa chamar a função de destravar

Esquecer uma delas deixa o usuário preso numa página que não rola, e ele resolve isso fechando a aba

Empilhar duas travas

Abriu um modal dentro de outro? O segundo fecha, destrava tudo, e o primeiro fica lá aberto com a página rolando atrás

Use um contador simples e só destrave quando ele voltar a zero

Aplicar em body e em documentElement sem critério

Escolha um e mantenha o mesmo nas duas funções, travar num elemento e destravar no outro é receita de bug silencioso

Esquecer o teclado

Tirar a barra some com a rolagem do mouse, mas a navegação por Tab ainda leva o foco pra elementos escondidos atrás da sobreposição

Se a ideia é modal, trave o scroll e também mantenha o foco dentro dele

Deixar a linha do Internet Explorer sem pensar

Aquele document.body.scroll = "no" é uma propriedade específica daquele navegador, ela não faz parte do jeito padrão de esconder a rolagem

Se o seu projeto não precisa dar suporte a navegadores antigos, essa linha é opcional e você pode ficar só com o overflow