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.