9/20/21, 10:45 AM How to Hide the Scrollbar in CSS

WEBSITE | 3 MIN READ

How to Hide the Scrollbar in CSS

Written by Jamie Juviler
@WebsiteJamie

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: Free Intro Guide to HTML & CSS

https://blog.hubspot.com/website/hide-scrollbar-css  1/10
9/20/21, 10:45 AM How to Hide the Scrollbar in CSS

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:

EDIT ON
HTML CSS Result

 sc o ba dt o e; / o e o / LIVE
 overflow-y: scroll;
}

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

/* other styling */
* {
 background-color: #EAF0F6;
 color: #2D3E50;
 font-family: 'Avenir';
 font-size: 26px;
 font-weight: bold;
}

Resources

https://blog.hubspot.com/website/hide-scrollbar-css  2/10
9/20/21, 10:45 AM How to Hide the Scrollbar in CSS

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

EDIT ON
HTML CSS Result

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

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

/* other styling */
div {
 border: solid 5px black;
 border-radius: 5px;
 height: 300px;
 padding: 10px;
 width: 200px;
}
Resources

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.

https://blog.hubspot.com/website/hide-scrollbar-css  3/10
9/20/21, 10:45 AM How to Hide the Scrollbar in CSS

EDIT ON
HTML CSS Result

LIVE
/* hide scrollbar and
prevent scrolling */
#div-1 { overflow:
hidden; }
#div-2 { overflow:
visible; }

/* other styling */
div {
 border: solid 5px
black;
 border-radius: 5px;
 height: 100px;
 margin: 20px;
 width: 300px;
}

* {
 background-color:
Resources 1× 0.5× 0.25× Rerun

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:

https://blog.hubspot.com/website/hide-scrollbar-css  4/10
9/20/21, 10:45 AM How to Hide the Scrollbar in CSS

EDIT ON
HTML CSS Result

LIVE
/* hide vertical
scrollbar and prevent
vertical scrolling */

div {
 overflow-y: hidden;
 

 /* other styling */

 border: solid 5px
black;
 border-radius: 5px;
 height: 300px;
 width: 300px;
}

img { height: 500px; }

/* other styling */
* {
 background-color:
#EAF0F6;
 color: #2D3E50;
Resources 1× 0.5× 0.25× Rerun

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:

https://blog.hubspot.com/website/hide-scrollbar-css  5/10
9/20/21, 10:45 AM How to Hide the Scrollbar in CSS

EDIT ON
HTML CSS Result

LIVE
/* hide vertical
scrollbar and prevent
vertical scrolling */

div {
 overflow-x: hidden;
 

 /* other styling */

 border: solid 5px
black;
 border-radius: 5px;
 height: 300px;
 width: 300px;
}

img { height: 500px; }

/* other styling */
* {
 background-color:
#EAF0F6;
 color: #2D3E50;
Resources 1× 0.5× 0.25× Rerun

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.

https://blog.hubspot.com/website/hide-scrollbar-css  6/10
9/20/21, 10:45 AM How to Hide the Scrollbar in CSS

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 August 23 2021

Topics: Bootstrap & CSS

https://blog.hubspot.com/website/hide-scrollbar-css  7/10
9/20/21, 10:45 AM How to Hide the Scrollbar in CSS

Don't forget to share this post!

Related Articles

How to Create Scrolling Text With CSS [+

Code Templates]

WEBSITE | 5 MIN READ

https://blog.hubspot.com/website/hide-scrollbar-css  8/10
9/20/21, 10:45 AM How to Hide the Scrollbar in CSS

The Beginner's Guide to CSS Classes

WEBSITE | 7 MIN READ

How to Nest Your CSS Selectors for Cleaner

Code
https://blog.hubspot.com/website/hide-scrollbar-css  9/10
9/20/21, 10:45 AM How to Hide the Scrollbar in CSS

WEBSITE | 3 MIN READ

Popular Features


Free Tools


Company


Customers


Partners









App store Google Play

HubSpot
Logo
Copyright © 2021 HubSpot, Inc.

Legal Stuff
| Privacy Policy

https://blog.hubspot.com/website/hide-scrollbar-css 10/10