04.01.2025

Como Parar o Rolamento da Janela Ao Rolagem de um Div com jQuery

Resposta Rápida

Para evitar que a janela role enquanto você faz o scroll de um div aninhado, você pode usar JavaScript para interromper o evento scroll. O código a seguir, associado ao evento wheel, resolve eficazmente esse problema:

let scrollable = document.querySelector('.scrollable');
scrollable.addEventListener('wheel', (event) => {
  let { deltaY, currentTarget } = event;
  let isTop = currentTarget.scrollTop === 0;
  let isBottom =
    currentTarget.scrollTop + currentTarget.clientHeight >=
    currentTarget.scrollHeight;

  if ((deltaY < 0 && isTop) || (deltaY > 0 && isBottom)) {
    event.preventDefault();
    // Chegou ao limite da rolagem!
  }
});

Esse método funcionará corretamente se o elemento .scrollable tiver sua propriedade overflow-y definida como auto ou scroll.

.scrollable { overflow-y: auto; }

Assim, a rolagem da janela não será acionada quando o usuário atingir o final do div interno que pode ser rolado.

Trabalhando de Forma Segura com JavaScript

Use JavaScript para refinar as configurações de rolagem do bloco interno e criar uma interação suave para o usuário com o elemento.

Chegando ao Final da Rolagem - Não É o Fim!

JavaScript é capaz de detectar quando a rolagem terminou.

function detectScrollEnd(event) {
  var element = event.target;
  var maxScroll = element.scrollHeight - element.clientHeight;

  if ((event.deltaY > 0 && element.scrollTop >= maxScroll) ||
      (event.deltaY < 0 && element.scrollTop <= 0)) {
    event.preventDefault();
    // Chegou ao limite?
  }
}
scrollableDiv.addEventListener('wheel', detectScrollEnd);

Controlando a Direção da Rolagem

Vamos empregar lógica condicional para determinar a direção da rolagem.

function scrollGuard(event) {
  let { deltaY, currentTarget: div } = event;
  let maxScrollTop = div.scrollHeight - div.clientHeight;

  if ((deltaY > 0 && div.scrollTop < maxScrollTop) ||
      (deltaY < 0 && div.scrollTop > 0)) {
    // A rolagem é permitida
  } else {
    // Não é possível rolar para cima ou para baixo!
    event.preventDefault();
  }
}
scrollableDiv.addEventListener('wheel', scrollGuard);

Controlando a Rolagem em Dispositivos de Toque

Um manipulador de evento touchmove com passive: false permite que você controle a rolagem em dispositivos de toque.

scrollableDiv.addEventListener('touchmove', (event) => {
  // Bloquear a rolagem da janela.
}, { passive: false });

Gerenciando o Overflow Sem Excessos

Usando uma função de toggle, gerenciamos o impacto na tag body.

function toggleBodyScroll(isEnabled) {
  document.body.style.overflow = isEnabled ? 'auto' : 'hidden';
  // Rolar ou não rolar, eis a questão.
}

Visualização

A situação aqui é semelhante a uma pessoa em um elevador que quer pular sem afetar o movimento do prédio:

Elevador (🛗): Move-se verticalmente de forma independente [🔼⬆️🔽]
Pessoa (👤): Quer pular sem influenciar o movimento do elevador.

🛗🔽 👤🆙 (Uau! O prédio começa a tremer!)

Precisamos de um espaço estratégico entre as ações da pessoa e o movimento do elevador:

🛗   👤🆙 (Perfeito! A pessoa pula enquanto o elevador permanece parado.)

Ideia Principal: Proteger a janela (prédio) de responder a ações dentro do div interno (elevador). 🛗🔒👤

Pontos Chave!

Compatibilidade – A Chave para Confiabilidade

Certifique-se de que sua solução funcione perfeitamente em todos os navegadores e plataformas, incluindo versões mais antigas e dispositivos de toque.

Mantenha-se Sempre Atualizado!

Mantenha seu conhecimento atualizado e aperfeiçoe suas habilidades. Métodos de tratamento de eventos desatualizados não são mais tão relevantes como antes. Fique atualizado com novas tecnologias e adote abordagens modernas.

Desempenho – Nosso Máximo Objetivo!

Ao interagir com eventos de rolagem, tente minimizar manipulações frequentes do DOM, pois isso pode degradar o desempenho do site. Garanta uma rolagem suave e, ao realizar operações complexas, considere usar throttling ou debouncing.

Recursos Úteis

1. overflow - CSS: Folhas de Estilo em Cascata | MDN — Informações sobre a propriedade overflow na MDN.
2. Tratamento e Geração de Eventos no Navegador — Uma explicação simples dos conceitos de bubbling e capturing de eventos.
3. Desabilitar rolagem em todos os dispositivos móveis - Stack Overflow — Respostas da comunidade sobre como desabilitar a rolagem em dispositivos móveis.
4. pointer-events | CSS-Tricks — Um artigo sobre a propriedade pointer-events.
5. Layout CSS - A Propriedade position — Tudo sobre a propriedade position: fixed e como controlar o comportamento dos elementos.
6. touch-action - CSS: Folhas de Estilo em Cascata | MDN — Uma visão geral da propriedade touch-action para gerenciar gestos em telas sensíveis ao toque.
7. Elemento: evento wheel - Web APIs | MDN — Informações sobre o evento wheel na MDN.

Video

Navigation