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.![Download Now: How to Land a Developer Role in the World of AI [Free Checklist]](https://no-cache.hubspot.com/cta/default/53/8d6a0803-23b3-44d8-a193-5da3a6e366a7.png)
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:
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.
How To Land a Developer Role in the World of AI
A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.
- Expert advice on how to build a portfolio
- Top programming languages to learn
- Resume building and interview tips
- Resources to strengthen communication skills
Download Free
All fields are required.
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, 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.
How To Land a Developer Role in the World of AI
A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.
- Expert advice on how to build a portfolio
- Top programming languages to learn
- Resume building and interview tips
- Resources to strengthen communication skills
Download Free
All fields are required.
![How to Create Scrolling Text With CSS [+ Code Examples]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/scrolling%20text%20css.jpeg)
![How to Center an Image with HTML and CSS [+ Code Modules]](https://www.hubspot.com/hubfs/center-an-image-in-html.jpg)
