I am seeking a way to completely hide scrollbars from an HTML component using CSS styles within a VueJS component. I have tried the solution of using overflow-y: hidden; within the component as well as within a specific subclass in the CSS, but neither completely removes the scrollbars while still allowing for scrolling functionality. I require a functional scroll panel without the visible scrollbars in various browsers.
I have come across a code snippet like the following:
-ms-overflow-style: none;
scrollbar-width: none;
:-webkit-scrollbar {
display: none;
-webkit-appearance: none;
}
Implementing this code within the CSS class of a custom list worked in Firefox, but the scrollbars are still visible in Chrome and Safari when they shouldn't be. Sources for this code include this and similar discussions, but they have not provided a solution that works consistently across browsers. Below is an example of the 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;
}
}
}
}
}
These classes are applied to specific div blocks with a hierarchy matching the nesting classes shown here.