2

This works completely fine on desktops:

.container::-webkit-scrollbar {
  width: 5px;
}
.container::-webkit-scrollbar-track {
  background: none;
}
.container::-webkit-scrollbar-thumb {
  background: #f5f5f573;
  border-radius: 50px;
  visibility: hidden;
}
.container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.container:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}

The container is the container for the color buttons. The problem is that it doesn't disappear on mobile devices. Is there a way that I can make the scrollbar disappear when not scrolling down on mobile devices? And then just reappear when I scroll again?

Zedd
  • 2,069
  • 2
  • 15
  • 35

2 Answers2

0

I think that this way will only hide the scrollbar for chrome and some other browsers but might not work with other browsers. I would recommend looking at this StackOverflow question: Hide scroll bar, but while still being able to scroll

Jainam
  • 153
  • 1
  • 11
0
html {
    overflow: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}
Ayren King
  • 417
  • 8
  • 16