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.

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

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

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

For instance, we have to 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;
}

With background: #ff0000;, we change the scrollbar button background.

Leave a Reply