How to hide scroll bar, but while still being able to scroll with CSS?

Sometimes, we want to hide scroll bar, but while still being able to scroll with CSS.

In this article, we’ll look at how to hide scroll bar, but while still being able to scroll with CSS.

How to hide scroll bar, but while still being able to scroll with CSS?

To hide scroll bar, but while still being able to scroll with CSS, we set the width of the scrollbar.

For instance, we write

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #ff0000;
}

to set the scrollbar width to 0 and make it transparent with

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

Then we change the scrollbar button background with background: #ff0000;

Conclusion

To hide scroll bar, but while still being able to scroll with CSS, we set the width of the scrollbar.