How to hide scrollbar css

Hide Scrollbar CSS How to hide scrollbar from any HTML element

There are times when we need to hide the scrollbar from the HTMl elements. The uses can vary from person to person. It is opinionated topic to keep the scrollbar or not based on User Interactions(UI)/User Experience(UX).

Most of the time, I don’t like to show the scrollbar to the user because of design practices I follow.

To achieve this, you just need to tickle with CSS to add some pseudo selectors for hiding it based on Browser’s stylings

Let’s see the default UI for scroll elements which will show the scrollbar.

We will declare a div which will contain a list of items and then we will apply some CSS to provide max-width and max-height to see the scroll behaviour.

Exit fullscreen mode

Exit fullscreen mode

Let’s see how it look in the screen

You see, browser automatically adds the scrollbar by default, but If we want to hide, we can do it.

Now, we will add some css to the element to hide the scrollbar:

We will declare a div with some other class name which will contain same number of items and then we will use the same CSS but with some extra rules to see the scroll behaviour but not see the scrollbar.

Exit fullscreen mode

Exit fullscreen mode

Let’s see, whether we achieved what we wanted or not

Here, you can see that, the scrollbar is no longer can be seen, but the functionality for scrolling remain intact.

Hope this helps you someway. Do comment your thoughts on anything, you would like to change or add.

CSS hide scroll bar, but have element scrollable

I have this element called items and the content inside the element is longer than the element height, I want to make it scrollable but hide the scroll bar, how would I do that?

I tried setting the left-side class overflow to auto, but that didn’t do anything.

9 Answers 9

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You can hide it :

And if you want to use SCSS/SASS:

Hope this helps

Similar to Kiloumap L’artélon’s answer,

work on all major browsers

You can hide it on specific div usig class:

if you really want to get rid of the scrollbar, split the information up into two separate pages.

There are five essential usability guidelines for scrolling and scrollbars:

How do I remove the horizontal scrollbar in a div?

Is there a way to remove the horizontal scrollbar in a div?

16 Answers 16

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Don’t forget to write overflow-x: hidden;

The code should be:

Add this code to your CSS. It will disable the horizontal scrollbar.

To hide the horizontal scrollbar, we can just select the scrollbar of the required div and set it to display: none;

One thing to note is that this will only work for WebKit-based browsers (like Chrome) as there is no such option available for Mozilla.

In order to select the scrollbar, use ::-webkit-scrollbar

How to Hide the Scrollbar in CSS

Written by Jamie Juviler

Learn more CSS tips with this introductory guide.

Designing a website exactly how you want often requires cutting out the excess — some whitespace here, an underline there, or, in today’s case, the scrollbar.

Whether for design or functionality reasons, it’s easy to hide the scrollbar on a page or page element with a bit of CSS. There are multiple ways to do this — hiding the scrollbar while allowing scrolling, hiding it while disabling scrolling, and keeping the scrollbar hidden only until it’s needed — some of which will work better based on your case.

To meet your design needs, this guide will cover all of these methods. Let’s get started.

How to Hide the Scrollbar in CSS (but Allow Scrolling)

Alas, there is no one dedicated CSS rule to hide the scrollbar while keeping the ability to scroll down a page/element. However, this is possible with a few browser-specific CSS rules. To hide the scrollbar and keep scrolling functionality, apply the following CSS to the body (for the entire page) or a specific element.

. where element is the selector you want to target. Here’s what this code looks like when applied to the whole page:

And here is the same code applied to a

Normally a scrollbar would appear in both of these cases, but our rules prevent this from happening on popular web browsers.

How to Hide the Scrollbar in CSS (and Prevent Scrolling)

To hide the scrollbar and disable scrolling, we can use the CSS overflow property. This property determines what to do with content that extends beyond the boundaries of its container.

To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element’s border. Alternatively, use overflow: visible to show content that extends beyond the borders of the container.

This disables both vertical and horizontal scrolling. As we’ll see next, you can also disable only horizontal scrolling or only vertical scrolling.

How to Hide the Vertical Scrollbar in CSS

To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so:

How to Hide the Horizontal Scrollbar in CSS

Since horizontal scrolling is generally a bad idea, this rule can come in handy. To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden:

How to Hide the Scrollbar Until Needed

Hiding the scrollbar might aid your design in some cases. But in others, removing this part of the page can actually harm the user experience.

Most visitors associate the activity of scrolling with a visible scrollbar. So, if you apply this method to an entire page, it might seem strange to some. Also, scrollbars tell us how much of the page we have left to view (unless infinite scroll is implemented). Unless you have some other visual indicator that there is more content left to see, a lack of scrollbar could be off-putting.

User testing can clarify how a missing scrollbar impacts your site’s user experience, but a good compromise in many cases is to hide the scrollbar until the user initiates scrolling. To enable this in CSS, use the overflow: auto rule.

Hide the Scrollbar with CSS

Whether you’re building a page with pure CSS or a framework like Bootstrap, it only takes a few rules to hide the scrollbar from your page.

However, keep in mind that just because you can, it doesn’t mean that you should. For many users, the scrollbar is a handy visual cue that supports navigation. If you’re going to remove it, be sure to do this intentionally and in a way that aids your design.

Originally published Apr 15, 2021 7:00:00 AM, updated April 20 2022

How to hide scrollbar in Firefox?

I just found out how to hide the scrollbar in Google Chrome, I did it with this code:

The only problem is that this doesn’t work on Firefox. I tried many ways to do it but it still doesn’t work.

18 Answers 18

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You can use the scrollbar-width rule. You can scrollbar-width: none; to hide the scrollbar in Firefox and still be able to scroll freely.

To hide scroll bar on Chrome, Firefox and IE you can use this:

I was able to hide the scrollbar but still be able to scroll with mouse wheel with this solution:

This is what I needed to disable scrollbars while preserving scroll in Firefox, Chrome and Edge in :

Note: User Agents must apply any scrollbar-width value set on the root element to the viewport.

For webkit use following:

For Mozilla Firefox use following code:

and if scrolling does not work then add

to specific element

For more recent version of Firefox the old solutions don’t work anymore, but I did succesfully used in v66.0.3 the scrollbar-color property which you can set to transparent transparent and which will make the scrollbar in Firefox on the desktop at least invisible (still takes place in the viewport and on mobile doesn’t work, but there the scrollbar is a fine line that is placed over the content on the right).