xxxxxxxxxx
body::-webkit-scrollbar {
width: 12px; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
background: orange; /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
background-color: blue; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
}
Modern css scrollbar
xxxxxxxxxx
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #ffffff3a;
}
::-webkit-scrollbar-thumb {
background-color: #ffffff;
border-radius: 20px;
}
xxxxxxxxxx
/* Width and height of the scrollbar track */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Background color of the scrollbar track */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
/* Color of the scrollbar thumb */
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 5px;
}
/* Color of the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
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
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
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
.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;
}
xxxxxxxxxx
/* For Webkit-based browsers (Chrome, Safari, etc.) */
/* Track */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px;
}
/* For Firefox */
/* Track */
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
/* Handle */
scrollbar-color: #888 #f1f1f1;
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
body::-webkit-scrollbar {
@apply w-[10px] bg-[#0b1120];
}
body::-webkit-scrollbar-track {
@apply bg-slate-200 dark:bg-[#0B1120];
}
body::-webkit-scrollbar-thumb {
@apply rounded-xl bg-gray-600 dark:bg-slate-700;
}