/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
/* border-radius: 5px; */
}
/* Handle */
::-webkit-scrollbar-thumb {
background:rgba(58, 114, 60, 1);
/* border-radius: 5px 0 0 5px; */
/* box-shadow: inset 5px -5px 5px rgba(58, 114, 60, 1); */
}
/* transparent scrollbar */
div::-webkit-scrollbar {
width: 12px;
}
div::-webkit-scrollbar-thumb {
border: 2px solid #ffffff2f;
border-radius: 20px;
}
<- modern css scrollbar css ->
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Chrome, safari */
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-thumb {
background-color: gray;
}
/* Firefox */
.selector {
scrollbar-width: none;
}
::-webkit-scrollbar{
width: 0.9vw;
background: #777;
}
::-webkit-scrollbar-thumb{
background: -webkit-linear-gradient(transparent,#30ff00);
background: linear-gradient(transparent,#30ff00);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover{
background: -webkit-linear-gradient(transparent,#00c6ff);
background: linear-gradient(transparent,#00c6ff);
}
.Class::-webkit-scrollbar {
width: 2px;
}
.Class::-webkit-scrollbar-track {
border-radius: px;
background: #c9cacc;
}
.Class::-webkit-scrollbar-track:hover {
background: #78797a;
}
.Class::-webkit-scrollbar-thumb {
background: #3d5585;
border-radius: 10px;
}
.scroll-bar::-webkit-scrollbar-thumb:hover {
background: #01143b;
}
/* just so you can scroll */
html, body {
margin: 0;
padding: 500px;
}
/* actual styles */
body {
overflow: overlay;
}
.div1 {
background: grey;
margin-top: 200px;
margin-bottom: 20px;
height: 20px;
}
::-webkit-scrollbar {
width: 18px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.25);
border-radius: 200px;
border: solid 4px transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-track {
background: transparent;
}