0

I try to hide the vertical scrollbar on one page (component) only. I use "react": "^18.2.0" and "@mui/material": "5.10.4" (MUI v5).

Last thing I tried was to style the parent div - for which I used a Box component directly, which did not do anything:

return (
    <Box 
    component="div"
    sx={{
        overflowX: "hidden",
        overflowY:"auto",
        '&::-webkit-scrollbar': {
            display: "none"
        }
    }}>
        ... content ...
    </Box>
)

Similar this did not work (from solution here: Customize `::-webkit-scrollbar` inline with React):

<div style={{ '&::WebkitScrollbar': { width: 0, height: 0 } }}></div>

Before I tried adding a .css as suggested in this solution: How to hide scroll bar in react app with allowing scrolling

But this also did not do anything:

return (
    <div className="container">
        ... content ...
    </div>
)

The only thing that workes was to add a global property to the .css file but this is hiding the scrollbar on every page and also does not work on firefox.

Thanks a lot!

smaica
  • 723
  • 2
  • 11
  • 26

1 Answers1

0

Set these CSS rules to the specific page component

with: 0 !important;
background-color: transparent; /* optional */

Don't forget to add ::-webkit-scrollbar pseudo-element to that class.

example:

<Box class="hideme"></Box>

CSS:

.hideme::-webkit-scrollbar {
    width: 0 !important;
    background-color: transparent; /* optional */
}
Sazzad Hussain
  • 321
  • 1
  • 3
  • 11
  • Thanks for your response. I can't use `class`, I have to use 'className'. I get this warning: `react-dom.development.js:86 Warning: Invalid DOM property class. Did you mean className?` Nevertheless, I tried with your suggestions and `className="hideme"` but nothing happens. – smaica Jan 11 '23 at 18:36