I have a ponent in react on which touchmove event should be disabled. I have tried the following but it does not work.

parentRef.current.addEventListener("touchMove", e => e.preventDefault(), false)

I have a ponent in react on which touchmove event should be disabled. I have tried the following but it does not work.

parentRef.current.addEventListener("touchMove", e => e.preventDefault(), false)

• javascript
• reactjs
• touch-event

• 2 Does this answer your question? How to prevent default handling of touch events? – Cristik Commented May 24, 2022 at 5:09

3 Answers 3

You can simply use the touch-action property in your CSS file to remove the scroll event from your html body or an element. Add the below code in your code.

touch-action: none;
-ms-touch-action: none;

You can check if this device has innerWidth below certain pixels then set overflow:hidden and height & width to 100vh & 100vw respectively to the parentRef in useEffect

To prevent scrolling using CSS on React rendered ponents, we can set the overflow CSS property to hidden with JavaScript.

For instance, we write:

import React, { useEffect } from "react";

export default function App() {
  useEffect(() => {
    document.body.style.overflow = "hidden";
  }, []);

  return <div>hello world</div>;
}

to set the overflow CSS of the body element to hidden when the ponent mounts with:

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

The useEffect callback only runs when the ponent mounts since we passed in an empty array as the 2nd argument of useEffect.