06.03.2025

Desabilitando a função de "atualizar por deslizar para baixo" no Chrome para Android

Resposta Rápida

Para desabilitar a atualização da página ao deslizar para baixo, adicione a seguinte propriedade ao seu CSS:

body {
  overscroll-behavior-y: none; /* Com isso, deslizar para baixo não atualizará a página */
}

Esse método bloqueia de forma confiável a capacidade de atualizar a página ao deslizar em dispositivos Android.

Você pode adicionar essa propriedade ao seu arquivo de estilo principal ou na seção <style> do seu documento HTML.

Ajustando o Comportamento de Rolagem

Em vez de desabilitar completamente o deslizar para atualizar a página, você pode gerenciar o comportamento de rolagem e as interações de toque de forma mais granular.

Interações de Toque Personalizadas

Aplicar a propriedade touch-action: none; em elementos responsivos ao toque pode melhorar a navegação e a interação do usuário com o conteúdo.

Gestão de Rolagem Considerando Limites de Conteúdo

Combinar as propriedades overflow-y: auto; e overscroll-behavior-y: none; em um bloco de conteúdo ajuda a ajustar a rolagem de maneira precisa e evitar atualizações indesejadas da página.

.div-com-superpoderes {
  overflow-y: auto;
  overscroll-behavior-y: none; /* Atualização da página é cancelada */
}

Esse método garante um controle preciso sobre a rolagem e as atualizações da página.

Uso Avançado de JavaScript

Definir manipuladores de eventos touchmove com preventDefault por meio de JavaScript ou jQuery permite regular as ações na página. Isso é relevante quando você deseja proibir o deslizar para atualizar a página, permitindo ainda a rolagem horizontal, por exemplo, em sliders.

// Em sliders, precisamos de uma rolagem horizontal suave; os deslizamentos para cima e para baixo não são necessários
document.querySelector('.carousel').addEventListener('touchmove', function(e) {
  if (/* condição para detectar deslize horizontal */) {
    e.preventDefault();
  }
}, { passive: false });

Visualização

Aqui está uma explicação visual de como esses métodos funcionam:

Antes: 🖼️👆➡️ (Puxando o canvas para baixo, ele atualizou)

Após aplicar nossos métodos:

// Método de bloqueio de rolagem
body.ontouchmove = function(e) { e.preventDefault(); /* Agora o canvas está fixo no lugar😀! */};

No final, obtemos:

Depois: 🖼️🔒➡️ (O canvas está fixo; puxá-lo para baixo é inútil. Sucesso! 🎉)

Gerenciando o Comportamento do Navegador e Mais

Embora o CSS sirva como base para configurações, a interação adicional com HTML e JavaScript permite maior flexibilidade e expande as possibilidades para usuários avançados.

Estratégias de Longo Prazo Usando HTML

Meta tags e manifests de site podem fornecer dicas amigáveis ao navegador sobre o comportamento desejado de sua aplicação web. Elas não desabilitam diretamente o deslizar, mas podem ser usadas para criar configurações acessíveis.

<meta name="mobile-web-app-capable" content="yes">

Esta tag sinaliza ao navegador sobre o comportamento preferido da sua aplicação.

Desabilitação Precisa Usando JavaScript

Manipuladores de eventos JavaScript oferecem maior precisão para desativar a atualização da página causada pelo deslizar para baixo, especialmente quando a página está rolada para o topo. Isso melhora a experiência do usuário.

// Para garantir que a atualização da página não seja interrompida:
window.addEventListener('touchmove', function(e) {
  if(window.pageYOffset === 0) {
    e.preventDefault();
  }
}, { passive: false });

Equilibrando Desempenho e Estética

Permitir o tratamento de eventos de toque pode melhorar o desempenho do site. Manter uma operação estável e suave de todos os elementos, especialmente após alterações, é essencial para proporcionar uma experiência de qualidade ao usuário. Testar em diferentes dispositivos ajudará a alcançar os melhores resultados.

Recursos Úteis

1. Como Substituir o Deslizar para Baixo para Atualização no Chrome para Android - MDN - Descrição da propriedade CSS touch-action.
2. Usando a Propriedade CSS touch-action - CSS-Tricks - Dicas úteis sobre o uso de touch-action.
3. Controle Sobre a Rolagem - Chrome Developers - Recomendações sobre a configuração do deslizar para atualizar e do comportamento de rolagem.
4. Gerenciando o Comportamento de Overflow no CSS - CSS-Tricks - Exploração da propriedade overscroll-behavior no design web.
5. Status da Função overscroll-behavior no Chrome - Estado da Plataforma Chrome - Informações sobre o estado atual da overscroll-behavior no navegador Chrome.
6. Especificação W3C para a Propriedade touch-action - Documentação oficial do W3C sobre a propriedade touch-action.

Video

Navigation