Como Evitar a Atualização da Página ao Arrastar para Baixo no Mobile

 

Como Evitar a Atualização da Página ao Arrastar para Baixo no Mobile

Em muitos navegadores móveis, um gesto de "puxar para baixo" no topo da página pode acionar a funcionalidade de "pull-to-refresh" (atualização da página). Embora útil em alguns cenários, esse comportamento pode ser indesejado em aplicações web que utilizam elementos de toque ou onde a página não deve ser recarregada.

Neste artigo, vamos aprender como desativar essa funcionalidade indesejada sem prejudicar o comportamento natural de rolagem da página.

Por que "Pull-to-Refresh" Pode Ser um Problema?

Em aplicações web móveis, o "pull-to-refresh" pode interferir com gestos de toque personalizados ou causar frustração ao recarregar a página inadvertidamente. Por exemplo:

• Interfaces que usam gestos para interatividade.
• Experiências onde o conteúdo é carregado dinamicamente.
• Cenários onde a atualização da página pode levar à perda de estado ou dados.

A Solução

Podemos usar eventos de toque (touchstart e touchmove) para detectar quando o usuário tenta "puxar para baixo" no topo da página. Nesse caso, podemos prevenir a ação padrão de atualização, garantindo que a rolagem normal continue funcionando.

Código Completo

 
import { ReactNode, useEffect } from "react";

export interface PreventPullToRefreshContainerProps {
  children: ReactNode;
}

const PreventPullToRefreshContainer = ({
  children,
}: PreventPullToRefreshContainerProps) => {
  useEffect(() => {
    let startY: number | null = null; // Para armazenar a posição inicial do toque.

    // verifica se o elemento possui scroll ativo.
    const isScrollable = (element: HTMLElement): boolean => {
      const style = window.getComputedStyle(element);
      const overflowY = style.overflowY;
      const canScroll = overflowY === "auto" || overflowY === "scroll";
      return canScroll && element.scrollHeight > element.clientHeight;
    };
    
    // verifica se o evento pode ser bloqueado no elemento alvo.
    const shouldPreventPullToRefresh = (target: HTMLElement): boolean => {
      let currentElement: HTMLElement | null = target;

      while (currentElement !== null && currentElement !== document.body) {
        if (isScrollable(currentElement)) {
          return false;
        }
        currentElement = currentElement.parentElement;
      }

      return true; 
    };
    
    const onTouchStart = (e: TouchEvent) => {
      // Salva a posição inicial do toque.
      startY = e.touches[0].clientY;
    };

    const onTouchMove = (e: TouchEvent) => {
      if (startY === null) return;

      const currentY = e.touches[0].clientY;
      const isPullingDown = currentY > startY;

      // Previne "pull-to-refresh" somente se no topo e arrastando para baixo.
      if (window.scrollY === 0 && isPullingDown) {
        const target = e.target as HTMLElement;
        if (shouldPreventPullToRefresh(target)) {
          e.preventDefault();
        }
      }
    };

    // Adiciona os event listeners
    document.addEventListener("touchstart", onTouchStart, { passive: true });
    document.addEventListener("touchmove", onTouchMove, { passive: false });

    // Remove os event listeners no cleanup
    return () => {
      document.removeEventListener("touchstart", onTouchStart);
      document.removeEventListener("touchmove", onTouchMove);
    };
  }, []);

  return <div className="touch-pan-x">{children}</div>;
};

export default PreventPullToRefreshContainer;
       
 

Passo a Passo Explicado

1. Detectar o Início do Toque (touchstart):

   • Armazenamos a posição inicial do toque em startY.
   • Isso nos ajuda a determinar se o movimento subsequente é para baixo.

2. Interceptar o Movimento (touchmove):

   • Comparamos a posição atual do toque (currentY) com a posição inicial (startY).
   • Prevenimos o comportamento padrão apenas quando:
     • O scroll está no topo da página (window.scrollY === 0).
     • O movimento detectado é para baixo (currentY > startY).

3. Prevenir Atualização (e.preventDefault()):

   • Usamos e.preventDefault() para bloquear a funcionalidade de "pull-to-refresh".
   • Configuramos o evento touchmove como não-passivo (passive: false), permitindo que o navegador aceite a chamada de preventDefault().

4. Limpeza:

   • Removemos os event listeners quando o componente é desmontado, garantindo eficiência e evitando vazamentos de memória.

Benefícios do Método

• Preserva a rolagem natural: O scroll vertical continuará funcionando normalmente, mesmo no topo da página.
• Bloqueia apenas o "pull-to-refresh": Garante que a página não seja atualizada por acidente.
• Fácil de implementar: Pode ser encapsulado em um componente reutilizável, como no exemplo acima.

Dicas Adicionais

• Certifique-se de usar passive: false no evento touchmove para que e.preventDefault() funcione.
• Teste o comportamento em diferentes navegadores móveis para garantir que funcione conforme esperado.
• Use esta técnica com moderação e apenas em casos onde "pull-to-refresh" é realmente indesejado.

Conclusão

Ao desativar o "pull-to-refresh" de forma controlada, podemos criar experiências móveis mais previsíveis e intuitivas. Esta solução preserva a rolagem natural da página e previne ações indesejadas, como a atualização acidental da página.

Se você tiver dúvidas ou quiser mais dicas sobre desenvolvimento web, deixe um comentário abaixo! 🚀