Hide Scrollbars While Allowing Scrolling with CSS

To hide a scrollbar with CSS while keeping the element scrollable, use scrollbar-width: none plus a ::-webkit-scrollbar fallback. Users can still scroll with a mouse wheel, trackpad, touch or keyboard, but no scrollbar is drawn.

This is common for horizontal carousels, tab bars and chat panels where the scrollbar looks out of place. If you want to restyle the scrollbar rather than remove it, see Style Scrollbars Using CSS.

CSS to Hide the Scrollbar but Allow Scrolling

Add this to your stylesheet and replace .element with the class of the scrolling container:

.element {
    overflow: auto;
    scrollbar-width: none;     /* Firefox, Chrome and Edge 121+, Safari 18.2+ */
    -ms-overflow-style: none;  /* Internet Explorer and legacy Edge */
}

.element::-webkit-scrollbar {
    display: none;             /* Older Chrome, Edge and Safari */
}

To hide the scrollbar of the whole page, target the html element:

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

How It Works

The scrollbar is hidden, but the element is still a scroll container, so scrolling keeps working. Each rule covers a different set of browsers:

• scrollbar-width: none is the standard property. It is supported in Firefox 64+, Chrome and Edge 121+, and Safari 18.2+, and has been Baseline since December 2024.
• ::-webkit-scrollbar is a non-standard pseudo-element for Chromium and WebKit browsers. It covers older Chrome and Safari versions that don’t support scrollbar-width.
• -ms-overflow-style: none only matters for Internet Explorer 10 and 11 and the old EdgeHTML-based Edge. You can drop it if you don’t support those.

overflow: auto is there to make the element scrollable in the first place. Use overflow-x or overflow-y if you only want one direction.

Why display: none Instead of width: 0

Many snippets set width: 0; height: 0 on ::-webkit-scrollbar. On iOS, Safari 13 and later ignores every style on that pseudo-element except display: none, so display: none is the safer choice.

Chrome and Edge 121+ also ignore ::-webkit-scrollbar on any element where scrollbar-width or scrollbar-color is set to something other than auto. That is fine here, since both rules hide the scrollbar.

It matters if you use scrollbar-width: thin and expect your ::-webkit-scrollbar styles to apply as well.

Avoid an unscoped ::-webkit-scrollbar { display: none; } rule without a selector. It hides scrollbars on every element on the site, including textareas and code blocks.

Accessibility: Give Users Another Cue

A hidden scrollbar is also a hidden hint that there is more content, and users without a wheel or touchpad can get stuck.

MDN recommends avoiding scrollbar-width: none, because content can become hard to scroll without another scrolling mechanism.

If you hide it anyway:

• Show that content continues, for example with a partly visible next item, a fade at the edge, or arrow buttons.
• Make the container reachable by keyboard. If it has no focusable content inside, add tabindex="0" and an aria-label so arrow keys can scroll it.
• Don’t hide the main page scrollbar on long pages. It is the main indicator of page length and position.

For horizontal carousels, CSS scroll snapping makes swiping between items feel controlled once the scrollbar is gone.

FAQs

Common questions about hiding scrollbars with CSS: