Back to library
🎨CSScssbeginner

Hide Scrollbar

Hide scrollbar while keeping scroll functionality

scrollstyling

Code

1/* Hide scrollbar for Chrome, Safari and Opera */
2.hide-scrollbar::-webkit-scrollbar {
3  display: none;
4}
5
6/* Hide scrollbar for IE, Edge and Firefox */
7.hide-scrollbar {
8  -ms-overflow-style: none;  /* IE and Edge */
9  scrollbar-width: none;  /* Firefox */
10}
11
12/* Custom thin scrollbar (alternative) */
13.thin-scrollbar::-webkit-scrollbar {
14  width: 6px;
15}
16
17.thin-scrollbar::-webkit-scrollbar-track {
18  background: transparent;
19}
20
21.thin-scrollbar::-webkit-scrollbar-thumb {
22  background: rgba(0, 0, 0, 0.2);
23  border-radius: 3px;
24}
25
26.thin-scrollbar::-webkit-scrollbar-thumb:hover {
27  background: rgba(0, 0, 0, 0.3);
28}

Quick Tips

  • Click the "Copy" button to copy the code to your clipboard
  • This code is production-ready and can be used in your projects
  • Check out related snippets below for more examples

Related Snippets

Build Your Own Snippet Library

Organize your team's code snippets with Snippetly. Share knowledge and boost productivity across your organization.