webkit scrollbar style examples
Example 1: custom scrollbar
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 */
}
Example 2: custom scroll bar
/* 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;
}