I have a question about how to completely hide scrollbars from HTML component with CSS style. Component written using VueJS. Some solutions, like
body
{
overflow-y: hidden;
}
doesn't work, when I put this in the beginning of the component. When I just put overflow-y: hidden; in list subclass in css, (replacing overflow: scroll; with it), I lose scrollbar, but also lose scrolling possibility. I need currently working scroll panel without scrollbars in browsers.
I found some code, like this:
-ms-overflow-style: none;
scrollbar-width: none;
:-webkit-scrollbar {
display: none;
-webkit-appearance: none;
}
putting this code inside CSS class of my custom list, and it's work, but only on Firefox. In Chrome, Safari and etc it still shows scrollbars, but it shouldn't. Sources which I found for this code are this, and any others with the same content, but still won't help. Example of widget component code:
.v-root {
.v-component-widget {
.v-component-widget-header{
.v-component-widget-header-list{
position: absolute;
overflow: scroll;
//Disable scrollbars
-ms-overflow-style: none;
scrollbar-width: none;
:-webkit-scrollbar {
display: none;
-webkit-appearance: none;
}
}
}
}
}
All this classes was used in specific for them div blocks, which hierarchy same as this nesting classes.
