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

Question

On mobile, I want the scrollbar to be completely hidden throughout the app, 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 and it works on browsers but not on mobile devices.

P粉896751037 · Answer

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.