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

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

Leia também

• Como desabilitar scroll com JavaScript
• Como deixar o scroll de uma página suave? (nice scroll)