Como desabilitar scroll com JavaScript

Neste artigo você vai aprender a como desabilitar scroll com JavaScript, utilizando recursos nativos da linguagem!

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

Introdução

Neste artigo, vamos explorar como desabilitar scroll com JavaScript em seu site ou aplicação web.

Em algumas situações, é útil impedir que os usuários façam scroll na página, como em pop-ups, telas de carregamento ou janelas modais.

Vamos abordar diferentes técnicas para desabilitar o scroll e explicar como implementá-las de forma clara e eficiente.

Desabilitando o scroll com CSS e JavaScript

Uma maneira simples de desabilitar o scroll é combinar CSS e JavaScript.

Podemos modificar a propriedade overflow do elemento body para controlar o comportamento de scroll da página.

Exemplo:

function desabilitarScroll() {
  document.body.style.overflow = 'hidden';
}

function habilitarScroll() {
  document.body.style.overflow = '';
}

// Desabilita o scroll
desabilitarScroll();

// Habilita o scroll após 5 segundos
setTimeout(habilitarScroll, 5000);

Neste exemplo, a função desabilitarScroll() define a propriedade overflow do elemento body como 'hidden', o que desabilita o scroll na página.

A função habilitarScroll() remove essa propriedade, permitindo que o scroll seja reativado.

Desabilitando o scroll em dispositivos móveis

Para desabilitar o scroll em dispositivos móveis, como smartphones e tablets, é necessário adicionar um manipulador de eventos para capturar e impedir o evento de toque (touch).

Podemos fazer isso com a função addEventListener().

Exemplo:

function bloquearScroll(event) {
  event.preventDefault();
}

function desabilitarScroll() {
  document.body.style.overflow = 'hidden';
  document.addEventListener('touchmove', bloquearScroll, { passive: false });
}

function habilitarScroll() {
  document.body.style.overflow = '';
  document.removeEventListener('touchmove', bloquearScroll);
}

// Desabilita o scroll
desabilitarScroll();

// Habilita o scroll após 5 segundos
setTimeout(habilitarScroll, 5000);

Neste exemplo, adicionamos a função bloquearScroll(), que usa event.preventDefault() para impedir o comportamento padrão do evento de toque.

Em seguida, modificamos as funções desabilitarScroll() e habilitarScroll() para adicionar e remover o manipulador de eventos, respectivamente.

Desabilitando o scroll sem escondê-lo

Para desabilitar o scroll sem escondê-lo, podemos usar JavaScript para capturar e impedir os eventos de rolagem, mantendo a barra de rolagem visível.

Exemplo:

function bloquearScroll(event) {
  event.preventDefault();
}

function desabilitarScroll() {
  window.addEventListener('wheel', bloquearScroll, { passive: false });
  window.addEventListener('touchmove', bloquearScroll, { passive: false });
}

function habilitarScroll() {
  window.removeEventListener('wheel', bloquearScroll);
  window.removeEventListener('touchmove', bloquearScroll);
}

// Desabilita o scroll
desabilitarScroll();

// Habilita o scroll após 5 segundos
setTimeout(habilitarScroll, 5000);

Neste exemplo, a função bloquearScroll() usa event.preventDefault() para impedir o comportamento padrão dos eventos de rolagem.

As funções desabilitarScroll() e habilitarScroll() adicionam e removem os manipuladores de eventos, respectivamente.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Neste artigo, aprendemos a desabilitar scroll com JavaScript em páginas web, tanto para desktop quanto dispositivos móveis. Essa técnica pode ser útil em diversas situações, como janelas modais, pop-ups ou telas de carregamento. Com o uso correto de CSS e JavaScript, você pode controlar o comportamento de scroll e melhorar a experiência do usuário em seu site ou aplicação.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!