How to Hide the Scrollbar in CSS

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.

 
/* hide scrollbar but allow scrolling */
element {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}

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

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

See the Pen Hide the Scrollbar in CSS but Allow Scrolling (body) by Christina Perricone (@hubspot) on CodePen.

And here is the same code applied to a <div> element:

See the Pen Hide the Scrollbar in CSS but Allow Scrolling (div) by Christina Perricone (@hubspot) on CodePen.

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

Featured Resource

Free CSS Coding Templates

Fill out the form to get the free code snippets.

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.

See the Pen Hide the Scrollbar in CSS and Prevent Scrolling (overflow: hidden) by Christina Perricone (@hubspot) on CodePen.

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:

See the Pen Hide the Scrollbar in CSS and Prevent Scrolling (overflow-y: hidden) by Christina Perricone (@hubspot) on CodePen.

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:

See the Pen Hide the Scrollbar in CSS and Prevent Scrolling (overflow-x: hidden) by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Hide the Scrollbar Until Needed by Christina Perricone (@hubspot) on CodePen.

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.