Html – How can I hide the scrollbar on mobile view ( Mobile device or emulator ) without effecting the scroll behaviour in a React APP?

Using CSS, you can hide the scrollbar on a mobile view without affecting the scroll behaviour. One common approach is using the overflow property and the -webkit-overflow-scrolling property to control scrolling behaviour on mobile devices. Here’s how you can achieve this in a React app:

Create a CSS class to hide the scrollbar:

 .hide-scrollbar {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }

Apply the hide-scrollbar class conditionally based on the screen size (e.g., for mobile devices) in your React component:

    
import { useEffect, useState } from 'react';
import './styles.css';

const App = () => {
   const [isMobile, setIsMobile] = useState(false);

   useEffect(() => {
      const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
   };

   handleResize();
   window.addEventListener('resize', handleResize);

   return () => {
      window.removeEventListener('resize', handleResize);
   };
  }, []);

  return (
    <div className={isMobile ? 'hide-scrollbar' : ''}>
        {/* Your app content */}
    </div>
  );
};

export default App;

the isMobile state determines whether the hide-scrollbar class should be applied. The class hides the scrollbar and maintains smooth scrolling behavior on mobile devices.

Remember to adjust the breakpoint value (768 in this case) to match your desired mobile viewport width