Skip to content

Instantly share code, notes, and snippets.

@howar31

howar31/simple_scrollbar_hover_effect.css

Last active September 26, 2024 08:32
Show Gist options
  • Save howar31/127f71018a9ef025291f9c76293972ea to your computer and use it in GitHub Desktop.
Save howar31/127f71018a9ef025291f9c76293972ea to your computer and use it in GitHub Desktop.
Download ZIP
Neat and clean scrollbar with hover transition effect CSS
Raw
simple_scrollbar_hover_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