snippetcssTip

Hide scroll bars on an element

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

hidescrollelementcssbars

Problem

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).

Solution

.no-scrollbars {
  overflow: auto;
  scrollbar-width: none;
}

.no-scrollbars::-webkit-scrollbar {
  display: none;
}

Code Snippets

.no-scrollbars {
  overflow: auto;
  scrollbar-width: none;
}

.no-scrollbars::-webkit-scrollbar {
  display: none;
}

Context

From 30-seconds-of-code: hide-scrollbars

Revisions (0)

No revisions yet.