Hide scroll bars on an element
Scrollbars are a common pain point when styling pages, mainly due to a lack of customization options and inconsistencies between browsers. You can hide scrollbars on an element while still allowing it to be scrollable by using the overflow
property and some vendor-specific properties.
First off, you need to ensure your content remains scrollable, by setting overflow: auto
on the element. Then, you can hide the scrollbars using scrollbar-width: none
on Firefox and display: none
on the ::-webkit-scrollbar
pseudo-element on WebKit browsers (Chrome, Edge, Safari).
.no-scrollbars { overflow: auto; scrollbar-width: none; } .no-scrollbars::-webkit-scrollbar { display: none; }