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?

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;
}