CSS trick for hiding scrollbars without affecting scrolling

In spite of its elegance, the scrollbar can make a website look like it was designed in the 1990s. However, thanks to the latest CSS properties, we can hide the scrollbar without impacting our users’ ability to scroll.

I'll show you the step by step process to hide the scroll bar in each browser.

Reason For Removing Scroll Bar

• Hiding a scrollbar also helps you save space for other content on your page — it can make for a more consistent user experience across different devices because different systems may not render the scrollbar in the same way.
• However, the most common reason to hide a scrollbar is for mobile viewing experiences. When viewing an app, like Facebook, on their phone, most users expect scrolling to be vertical, with no need for horizontal movement since screens are usually tall and narrow.

Hiding the scrollbar
Because of the fundamental differences between browsers, there’s no universal way of hiding scrollbars with CSS. Each browser has its method, and we will look at all of them below.

To hide the scrollbar in WebKit-based browsers, you have to use the ::-webkit-scrollbar pseudo selector. ::-webkit-scrollbar is a pseudo-element in CSS used by developers to modify the look of a browser’s scrollbar.

With the ::-webkit-scrollbar pseudo selector, there’s a wide range of things you can do to a scrollbar. You can modify the arrows pointing up and down, change the track’s color, change the background, and more. But we’re only going to look at how to hide the scrollbar without impacting scrolling. Let’s look at an example.

As you can see, in the stackblitz below, the scrollbar is visible on the right. To make it invisible without impacting scrolling, you just have to target the body element using the ::-webkit-scrollbar pseudo selector and set the display to none.

As you can see below, the scrollbar is no longer visible, but the page is still scrollable for both the mouse and keyboard.

In IE (Internet Explorer) and Edge

The syntax for hiding a scrollbar in IE and Edge is a bit different from WebKit-based browsers like Opera, Chrome, and Safari. Here, we have to use the -ms-overflow-style property.

Unlike ::-webkit-scrollbar, you can’t use the -ms-overflow-style to customize the scrollbar. To use it to hide a scrollbar, you just have to use the code below.

If you’re targeting a particular element or section, use the following code.

If you’re targeting the entire page, use this code.

In Firefox

To successfully hide the scrollbar in Firefox, you just need to use the scrollbar-width:none property to target a section like this.

To target the scrollbar of the entire page in Firefox, you have to be a bit more careful. In the two sections above, we applied the scrollbar code to the bodytag, and it worked, but with Firefox, we have to target the htmltag instead.

Alternatively, you can choose to use this other method to hide the scrollbar in Firefox.

Conclusion
If you are reading this, then by now, you fully understand the art of hiding scrollbars with CSS without impacting scrolling and accessibility. It’s important to note that when targeting sections that have scrollable content, leaving the scrollbar visible as a visual cue will help your users notice the section and not skip it by accident.