Quick Tip: How to Hide Scrollbars with CSS

Ever wanted to keep your page scrollable but get rid of that clunky default scrollbar? Whether it's for a sleek landing page or a custom sidebar, here is the cross-browser solution to make it disappear while keeping the functionality.

The Solution

To hide the scrollbar across all major browsers (Chrome, Safari, Firefox, Edge, and Opera), you need a combination of pseudo-elements and standard properties.

Add this snippet to your project's global CSS file (e.g., styles.css, global.css, or index.css):

/* 1. Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

/* 2. Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

How It Works

1. WebKit Browsers: Chrome, Safari, and Opera use the ::-webkit-scrollbar pseudo-element. Setting display: none removes it entirely.

2. Firefox: Firefox doesn't support the WebKit pseudo-element. Instead, it uses the standard scrollbar-width property set to none.

3. Legacy Edge & IE: The -ms-overflow-style: none handles older Microsoft browsers.

Where to put it?

Since scrollbars are often handled at the root level, this code works best in your Global Stylesheet. If you are using a framework like React or Next.js, pop this into your root layout.css or globals.css to ensure it applies consistently.

Note on UX: Be careful! Hiding the scrollbar removes a visual cue for users. Make sure it's obvious that the content is scrollable (e.g., cut-off text or content continuing "below the fold").