How to Hide Scrollbars in CSS for a Cleaner Look

When you design a website, there is always some part that you want to hide, and that is most often the scrollbars. Scrollbars sometimes mess up the neat look of a webpage, especially if you want it to be super clean and simple. But don't worry! You can make your webpage look much smoother and cleaner by hiding those scrollbars with CSS.

When stuff overflows from a box on a webpage, scrollbars pop up so people can scroll and see more. But sometimes, those scrollbars are just extra stuff getting in the way. You can make things smoother for users by hiding them. You can easily hide scrollbars using CSS without messing up how things work. With just a bit of code, you can make those scrollbars vanish while still letting users easily scroll through your stuff.

In this guide, we'll check out the ways to hide scrollbars with CSS. These tricks can give your projects a sleeker and tidier look, no matter if you're a beginner or a pro at web development. So, let's begin and learn how to hide those pesky scrollbars and make your online stuff look cooler!

Create a Cleaner Look by Hiding Scrollbars in CSS

With a little CSS knowledge, it's simple to conceal the scrollbar on a page or page element for both functional and aesthetic purposes. Here, we have mentioned how you can: 

• • Hide scrollbars & allow scrolling 
• • Hide scrollbars & prevent scrolling 
• • Hide vertical scrollbars 
• • Hide horizontal scrollbars

All of these techniques will be covered in this guide to satisfy your design needs. Now let's get going.

Hide Scrollbars without Preventing the Scrolling

There isn't a single CSS rule that can be used to conceal the scrollbar without removing the ability to scroll down a page or element. But with a few browser-specific CSS rules, this is achievable. 
‍

/* 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 */
}

To conceal the scrollbar and maintain scrolling capabilities, apply the following CSS to either an individual element or the body of the page.
‍

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

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

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

The element here is the desired target selection. When this code is used throughout the entire page, it appears like this
And here is the same code applied to a <div> element.
‍

/* 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;
}

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

Hide Scrollbars & Prevent Scrolling 

Using the CSS overflow property, we can make the scrollbar disappear and prevent scrolling. When content reaches outside of its container, this property decides what to do with it.

Simply apply the rule overflow: hidden to the body (for the full page) or a container element to stop scrolling while using this attribute. This obscures any content that is outside of the element's bounds. As an alternative, you can use overflow: visible to display content that goes outside the container.
‍

/* 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: #EAF0F6;
  color: #2D3E50;
  font-family: 'Arial';
}

Hide Vertical Scrollbars in CSS

You can follow the steps given below in order to hide vertical scrollbars in the CSS and make it look cleaner. 

• • Vertical scrollbars can be concealed by using the CSS property overflow-y: hidden
• • To conceal the scrollbar, apply this attribute to the element (usually a container or a specific div).
• • This setting instructs the browser to ignore the vertical scrollbar in the event that any content exceeds the screen.
• • Use caution when applying this method as it could negatively impact usability if the scrollbar becomes unusable and content becomes inaccessible.
• • Make sure that users still have access to all material via other methods, like keyboard navigation or other user interface components.

/* 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;
  font-family: 'Arial';
}

Hide Horizontal Scrollbars in CSS

This guideline can be useful since horizontal scrolling is often not a good idea. In order to disable horizontal scrolling and conceal the horizontal scrollbar in CSS, implement the following steps. 

• • Use the CSS attribute overflow-x: hidden
• • To conceal the scrollbar, apply this attribute to the element (usually a container or a specific div).
• • This setting tells the browser to ignore the horizontal scrollbar even in cases where the content is stretching across the horizontal plane.
• • Use caution when applying this method to avoid any usability problems, including material becoming unreadable in the absence of the scrollbar.
• • Make sure there are still ways for users to access all material, such as by using keyboard navigation or other UI elements.

/* 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;
  font-family: 'Arial';
}

Wrapping It All Up!

After giving it a thorough read, we hope that now you can easily hide the scrollbars in the CSS for a cleaner look. No matter, if you want to hide a vertical scrollbar or a horizontal one, you just need to follow the steps given in this blog. You can even now hide the scrollbars while allowing scrolling or preventing it, as per your own choice. So, even if you are just a beginner or an expert, you know the secrets to making your CSS look cleaner. Implement these steps and make your website design look good while coding in a very clean manner.