How to hide scrollbars on mobile devices or emulators without affecting scrolling behavior in React app?

Question

On mobile devices, I would like to completely hide the scrollbars throughout the application, but I need the user to be able to scroll.

I tried using CSS scrollbar, scrollbar-thumb, scrollbar-thumb:hover and scrollbar-track to hide the scrollbar, it works on the browser but not on mobile devices.

Answer 1

You need to use two CSS properties, one for webkit and another for Mozilla, as shown below -

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

.invisible-scrollbar {
  scrollbar-width: none;
}

Where .invisible-scrollbar is the class added to the related element.