hide scrollbar but keep scroll functionality in react.js

Question

I've tried all methods for vanilla HTML, JS and CSS but it don't seem to work and when it does its not responsive for instance when I reduce the screen it hides but if its Maximized it shows up

Please is there away to solve this issue in material-ui and reactjs

is there a way to make it compatible with various browsers too?

Speechmaking

Answer 1

This worked for me, i created an external CSS file just like plain HTML and CSS and then linked it to the react file. It's also cross platform.

.parentDiv{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.childDiv{
    position: absolute;
    top: 0;
    left: 0;
    bottom: -20px;
    right: -20px; 
    overflow: scroll;
 }

if that's too long for you, try this shorter method in your CSS file:

*{
    -ms-overflow-style: none;
}
::-webkit-scrollbar {
    display: none;
}

Speechmaking

webkit-scrollbar shouldn't be used in production and is a non standard. developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar – Jenn

Answer 2

According to the spec, you can hide the scroll bars and keep the functionality in some browsers with this:

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.example {
  -ms-overflow-style: none;
}

Substitution

webkit-scrollbar shouldn't be used in production and is a non standard. developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar – Jenn

Answer 3

In 2021:

Add in App.css, and import App.css into App.js

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

Kyrakyriako

Answer 4

In case you are using MUI styled components, you can use it while defining the custom element as well,

const MyScrollingElement = styled(Box)(() => ({
    overflow: "auto",
    scrollbarWidth: "none", // Hide the scrollbar for firefox
    '&::-webkit-scrollbar': {
        display: 'none', // Hide the scrollbar for WebKit browsers (Chrome, Safari, Edge, etc.)
    },
    '&-ms-overflow-style:': {
        display: 'none', // Hide the scrollbar for IE
    },
}));

From the above snippet, its obvious "scrollbarWidth" is most semantic way of doing it, however as pointed out here it only supports firefox browser for now. For chrome and other webkit based browsers, we have to follow the non-standard way of controlling pseudo-elements.

Try it out here.

Thingumajig

Answer 5

This worked for me on IE and Chrome. Nothing worked for firefox(79.0), a hack could be to make it transparent.

CSS

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

.scrollhost ::-moz-scrollbar {
  display: none;
 
}

.scrollhost {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-color: transparent transparent; /*just hides the scrollbar for firefox */
}

Royceroyd

Answer 6

::-webkit-scrollbar {
    width: 0;
}

Reinforce

Answer 7

There is another method, which worked for me. If you have different pages and, for all of them, you want to hide scrollbar, this is also an equally useful way

html{ overflow-y: scroll; }

html::-webkit-scrollbar{ display: none; }

Works on Chrome, cant say for other browsers. Add this in your global CSS or App.css and then import it in App.jsx or App.js or a file where all the pages are imported, like a main file.

Thankful