Cross-browser support for scrollbar styling and visibility is a challenge. It’s as simple as that. This article provides a solution that addresses the issue of hiding the scrollbars, using scrollbar-width, ::-webkit-scrollbar and -ms-overflow-style.
What are Scrollbars?
Scrollbars are bars that appear down the right-hand side and across the bottom of the browser (or an element within the webpage). They are useful for scrolling content and informing the visitor that there’s more content than is visible (either within the browser’s viewport or one of the page’s elements). Normally, your designs will embrace them as they serve an obvious purpose, but on occasion, you may want to hide them. And here’s an approach we’ve used to achieve this, using just CSS.
Hiding Scrollbars with CSS
As mentioned above, the approach will use scrollbar-width, ::-webkit-scrollbar and -ms-overflow-style, this is because there isn’t a single property that has sufficient cross-browser support – may be in the future scrollbar-width will get there?
.hide-scrollbar {
/*FireFox*/ scrollbar-width: none;
/*IE10+*/ -ms-overflow-style: -ms-autohiding-scrollbar;
}
.hide-scrollbar::-webkit-scrollbar {
/*Chrome, Safari, Edge*/ display: none;
}Note, however, that in IE this will only hide the scrollbar when it is not in hover state. Without JavaScript I wasn’t able to find a way to hide it completely and still have the scrolling functionality. It can be hidden with -ms-overflow-style: none, but for devices that need to grab the scrollbar to scroll there’ll be no way to trigger the scrolling.
Wrappgin it up
Okay, scrollbars aren’t completely hidden in IE, but this should do the trick. However, if you find you’re still seeing the scrollbar in some browsers it may need further tweaking, or you may want to consider using a JavaScript library, to step in and take over the scrolling events and styling.