Tengo un componente en reaccionar sobre el cual el evento touchmove debe deshabilitarse. He intentado lo siguiente pero no funciona.
parentRef.current.addEventListener("touchMove", e => e.preventDefault(), false)Puede verificar si este dispositivo tiene un ancho interno debajo de ciertos píxeles y luego configurar el overflow:hidden y la altura y el ancho en 100vh y 100vw respectivamente en parentRef en useEffect
Simplemente puede usar la propiedad de acción táctil en su archivo CSS para eliminar el evento de desplazamiento de su cuerpo html o un elemento. Agregue el siguiente código en su código.
touch-action: none; -ms-touch-action: none;Para evitar el desplazamiento usando CSS en los componentes renderizados de React, podemos configurar la propiedad CSS de desbordamiento para ocultarla con JavaScript.
Por ejemplo, escribimos:
import React, { useEffect } from "react"; export default function App() { useEffect(() => { document.body.style.overflow = "hidden"; }, []); return <div>hello world</div>; }para establecer el CSS de desbordamiento del elemento del cuerpo en oculto cuando el componente se monta con:
document.body.style.overflow = "hidden";La devolución de llamada useEffect solo se ejecuta cuando el componente se monta, ya que pasamos una matriz vacía como segundo argumento de useEffect.