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

Share Improve this question Follow edited May 21, 2022 at 23:43 RBT 26k2424 gold badges175175 silver badges260260 bronze badges asked May 21, 2022 at 10:21 akshadaakshada 3911 silver badge33 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.