Subscribe

Hide Scrollbars with pure CSS

✍️

Master CSS styling to hide or disable scrollbars in HTML. Perfect for Google Chrome & Firefox, using pseudo-elements for seamless scrolling.

12 Feb, 2024 · 2 min read

Today we will learn how to hide scrollbars with CSS!

As much as I love browser-native behavior, there are **use-cases when to make scrollbars invisible 👻, such as:

  • custom styling
  • embedded content
  • custom navigation menu
  • carousel & modal

Working on a Mac browser, you hardly see how ugly sidebars are.

Switching to Windows browsers however will often show pretty ugly scrollbars for side menus.

Let’s look at an example:

As you can see, the right-hand scrollbar for the content is fine, that’s normal behavior.

The browser scrollbar for the fixed side-menu is misplaced however and not nice to see.

On Mac, the UX is not disturbing since the bar disappears.

For Windows users it will always be visible though - which is not doing our design a favor.

How to hide a Scrollbar Removing the sidebar

We can luckily remove the scrollbar with some CSS magic✨ and not lose its functionality.

Note: please use this wisely since it’s a default way to show the user a scrollable area.

In our case, we will add a no-scroll class on the element we want to disable the scrollbar for:

.no-scroll {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.no-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

Let’s look at what we’re doing here.

As you can see, we have specific targets for IE and Firefox browsers.

  • -ms-overflow-style: none; targets Internet Explorer and Edge browsers and makes content still scrollable when there is an overflow - but without scrollbar.
  • scrollbar-width: none; targets Firefox and sets the scrollbar width to none, making it invisible, while keeping the scrolling functionality.
  • ::-webkit-scrollbar { display: none; } is a pseudo selector for webkit browsers, setting the sidebar to display: none.

Collectively the CSS styles ensure that the scrollbar is hidden across major browsers, including older versions of Internet Explorer and Edge, as well as modern browsers like Firefox, Chrome, Safari, and Opera.

Using these styles to disable the scrollbar will ultimately allow for a better UX by providing a cleaner look.🧹

You can view the CSS codes in this Codepen:

Demo

See the Pen CSS hide scrollbars by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect!

Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Modifying an SVG path with CSS

10 Dec, 2022 · 2 min read

Modifying an SVG path with CSS

Animate an SVG path with CSS

9 Dec, 2022 · 2 min read

Animate an SVG path with CSS

Join 2100 devs and subscribe to my newsletter