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.
