Como desabilitar o scroll usando JavaScript

Às vezes, é necessário desabilitar a funcionalidade de rolagem (scroll) em uma página da web, seja para criar uma experiência de rolagem personalizada ou para evitar que o usuário navegue além de determinada área.

Neste artigo, discutiremos diferentes abordagens para desabilitar o scroll usando JavaScript.

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

Método 1:

Definir a propriedade CSS “overflow” como “hidden” uma maneira simples de desabilitar o scroll é definir a propriedade CSS “overflow” como “hidden” para o elemento do corpo (body) ou qualquer outro elemento que contenha o conteúdo principal da página.

Veja um exemplo abaixo:

document.body.style.overflow = "hidden";

Método 2:

Adicionar um event listener para o evento “wheel” e prevenir o comportamento padrão outra abordagem é adicionar um event listener para o evento de rolagem (wheel) e prevenir o comportamento padrão, que é o deslocamento da página.

Veja o exemplo abaixo:

document.addEventListener("wheel", function(event) {
  event.preventDefault();
});

Com esse código, qualquer tentativa de rolagem será interceptada pelo event listener e o comportamento padrão será prevenido.

Método 3:

Definir a propriedade CSS “position” como “fixed” para o elemento do corpo (body) uma terceira opção é definir a propriedade CSS “position” como “fixed” para o elemento do corpo (body) ou qualquer outro elemento que contenha o conteúdo principal da página.

Veja o exemplo abaixo:

document.body.style.position = "fixed";

Com esse código, o elemento body será fixado na posição atual, impedindo qualquer rolagem.

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

Conclusão

Desabilitar o scroll em uma página da web pode ser útil em diversas situações.

Neste artigo, exploramos três métodos para desabilitar o scroll usando JavaScript: definindo a propriedade CSS “overflow” como “hidden”, adicionando um event listener para o evento “wheel” e prevenindo o comportamento padrão, ou definindo a propriedade CSS “position” como “fixed”.

Escolha o método mais adequado às suas necessidades e garanta uma experiência de rolagem personalizada ou restrita dentro da sua página.