Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
}
@ouoru

This comment has been minimized.

Copy link

@ouoru ouoru commented Nov 2, 2018

This is awesome :) thanks!

@gabrielzevedo

This comment has been minimized.

Copy link

@gabrielzevedo gabrielzevedo commented Mar 17, 2020

amazing *-*

@dlime

This comment has been minimized.

Copy link

@dlime dlime commented May 24, 2020

Thank you very much! For those without Sass:

.container {
	overflow: auto;
	color: #00000000;
	transition: color 0.3s;
}

.container:hover {
	color: #666666FF;
}
@jithinsebastian2

This comment has been minimized.

Copy link

@jithinsebastian2 jithinsebastian2 commented Oct 6, 2020

Awesome

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