You might have seen articles on how to customize scrollbars, but did you know you can also hide them? This can be really helpful, especially when you're creating scroll-snapping layouts using CSS. Those scrollbars can sometimes give a really ugly look to your design, so why not hide them?

If you're still reading this, then you definitely want to learn how to hide the scrollbar.

Let's say we have a structure where elements are aligned from left to right, and you can scroll horizontally. It's pretty simple, right?

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent {
  margin: 60px auto;
  width: 300px;
  border: 1px solid red;
  padding: 10px;
  display: flex;
  overflow: auto;
  gap: 10px;
}

.child {
  width: 80px;
  height: 80px;
  background: green;
  flex-shrink: 0;
}

As you can see, it's a horizontal scroll, and it has that weird scrollbar appearing. You probably want to hide it, right? It's pretty simple to do. Just add scrollbar-width: none; to the parent container, and boom—the scrollbar will disappear!

However, this method won't work on Safari and some older Chromium browsers. To make it work universally, you can add the -webkit version as well:

.parent::-webkit-scrollbar {
  width: 0px;
}

Now, what about browser support? Handling scrollbars can be a tough task because they don't have uniform support across all platforms. But don't worry! Using these two properties, you can hide the scrollbar on most browsers. If some browsers don't support it, the worst-case scenario is that the scrollbar will still appear, but nothing will break—it's a progressive enhancement.