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;
}