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
/* 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
/* 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: 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
/* For WebKit, Safari, and Chrome browsers */
div::-webkit-scrollbar {
width: 10px;
}
div::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
div::-webkit-scrollbar-thumb {
background-color: #888;
}
/* For Firefox browsers */
div::-moz-scrollbar {
width: 10px;
}
div::-moz-scrollbar-track {
background-color: #f1f1f1;
}
div::-moz-scrollbar-thumb {
background-color: #888;
}
/* For IE and Edge browsers */
div::-ms-scrollbar {
width: 10px;
}
div::-ms-scrollbar-track {
background-color: #f1f1f1;
}
div::-ms-scrollbar-thumb {
background-color: #888;
}
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
::-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
/* Chrome, safari */
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-thumb {
background-color: gray;
}
/* Firefox */
.selector {
scrollbar-width: none;
}
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); */
}