xxxxxxxxxx
/* Chrome, safari */
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-thumb {
background-color: gray;
}
/* Firefox */
.selector {
scrollbar-width: none;
}
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 */
}
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
/* Styling the scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* Styling the scrollbar for Firefox */
/* Requires Gecko 64+ */
scrollbar-color: #888 #f1f1f1; /* thumb color, track color */
/* Styling the scrollbar for Internet Explorer */
/* Requires IE 10+ */
-ms-overflow-style: none; /* hide scrollbar */
element::-ms-scrollbar {
width: 10px;
}
element::-ms-scrollbar-track {
background-color: #f1f1f1;
}
element::-ms-scrollbar-thumb {
background-color: #888;
border-radius: 5px;
}
element::-ms-scrollbar-thumb:hover {
background-color: #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 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
::-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
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-thumb {
background: #ff9c44;
border-radius: 6px;
}
by moheen