xxxxxxxxxx
/* 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;
}
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
/* 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
.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
}
xxxxxxxxxx
::-webkit-scrollbar {
width: 20px
}
::-webkit-scrollbar-thumb {
border: 7px solid transparent;
background-clip: padding-box;
border-radius: 9999px;
background-color: rgba(0, 0, 0, .3)
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .5)
}
body {overflow: overlay}
xxxxxxxxxx
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
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;
}