xxxxxxxxxx
/* 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); */
}
xxxxxxxxxx
::-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);
}
xxxxxxxxxx
/* width */
::-webkit-scrollbar {width: 10px;}
/* Track */
::-webkit-scrollbar-track {background: #f1f1f1;}
/* Handle */
::-webkit-scrollbar-thumb {background: #888;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: #555;}
xxxxxxxxxx
/* For Chrome, Safari, and Opera */
::-webkit-scrollbar {
width: 12px; /* Width of the scrollbar */
}
::-webkit-scrollbar-track {
background: #f1f1f1; /* Color of the track */
}
::-webkit-scrollbar-thumb {
background-color: #888; /* Color of the thumb */
border-radius: 6px; /* Rounded corners of the thumb */
}
::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Color of the thumb on hover */
}
xxxxxxxxxx
<- 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;
}
xxxxxxxxxx
/* Chrome, safari */
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-thumb {
background-color: gray;
}
/* Firefox */
.selector {
scrollbar-width: none;
}
xxxxxxxxxx
::-webkit-scrollbar {
width: 8px; /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
background: none; /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
background-color: gray; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: solid 1px #242424;
}
xxxxxxxxxx
/* transparent scrollbar */
div::-webkit-scrollbar {
width: 12px;
/* if scrollbar is horizontal replace width with height */
}
div::-webkit-scrollbar-thumb {
border: 2px solid hsla(0, 0%, 50%, 0.1);
border-radius: 20px;
/* to remove transparency */
/* background-color: hsla(0, 0%, 15%, 1.0); */
}
xxxxxxxxxx
.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
}
xxxxxxxxxx
body {
--sb-track-color: #232E33;
--sb-thumb-color: #6BAF8D;
--sb-size: 10px;
scrollbar-color: var(--sb-thumb-color)
var(--sb-track-color);
}
body::-webkit-scrollbar {
width: var(--sb-size);
}
body::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 10px;
}