Neat and clean scrollbar with hover transition effect CSS

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;
	}
}

Hii, thanks for the amazin script..

im trying on the other hand to have a transparent nav header and when scrolling the background changes to black...
i used the following script. but it just makes the background black the whole time.. when its fixed and when its scrolling.

is there soemthing that im missing?
would be thrilled if someone assists.
Thanks

.main-header-bar {
position: fixed;
top: 0px;
padding: 5px 0;
width: 100%;
height: 90px;
background-color: transparent;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
z-index:1000 !important;
}

.main-header-bar {
position: scroll;
top: 0;
left: 0;
width: 100%;
z-index: 999 !important; transition: all 0.4s ease-in-out;
background-color:rgba(0, 0, 0,.8) !important;
}

What about on scrollbar hover though