Skip to content

Instantly share code, notes, and snippets.

@howar31
Last active October 9, 2023 20:18
Show Gist options
  • Star 17 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save howar31/127f71018a9ef025291f9c76293972ea to your computer and use it in GitHub Desktop.
Save howar31/127f71018a9ef025291f9c76293972ea to your computer and use it in GitHub Desktop.
Neat and clean scrollbar with hover transition effect CSS
// Scrollbar with Hover Transition Effect
.container::-webkit-scrollbar {
width: 14px;
}
.container::-webkit-scrollbar-thumb {
background-clip: content-box;
border: 4px solid transparent;
border-radius: 7px;
box-shadow: inset 0 0 0 10px;
}
.container::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
.container::-webkit-scrollbar-corner {
background-color: transparent;
}
.container {
overflow: auto;
color: #00000000;
transition: color 0.3s;
&:hover {
color: #666666FF;
}
}
@immjs
Copy link

immjs commented May 2, 2023

What about on scrollbar hover though

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment