Hiding scrollbars with CSS
Luciano Ratamero
2022-03-28
Today I learned of a really simple way to make scrollbars functional, but hidden :]
It's really simple, you just need to add a couple of rules into your CSS and you'll be good to go:
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Chrome, Safari and old Opera */
.hide-scrollbar::-webkit-scrollbar { display: none; }
This is really useful for when you have an off-canvas panel (or anything absolute/fixed positioned), and you want it to scroll by itself if it has too much content.
Reference: https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp