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?
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;
}
webkit-scrollbar shouldn't be used in production and is a non standard. developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbarIn 2021:
Add in App.css, and import App.css into App.js
::-webkit-scrollbar {
display: none;
}
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;
}
webkit-scrollbar shouldn't be used in production and is a non standard. developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbarIn 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.
This worked for me on IE and Chrome. Nothing worked for firefox(79.0), a hack could be to make it transparent.
.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 */
}
::-webkit-scrollbar {
width: 0;
}
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.
What also works (not sure about firefox)is setting the scrollbar color to transparent:
scrollbar-color: transparent transparent
from https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
