For WebKit browsers (Google Chrome, Microsoft Edge, Safari, etc), you can customize the style of a scrollbar such as background color, width, thumb, tract… by using pure CSS.
Example
Preview:
The Code:
<html lang="en">
<head>
<title>Kindacode.com</title>
<style>
body {
height: 200vh;
}
/* Styling the scrollbar */
::-webkit-scrollbar {
width: 20px;
background: lemonchiffon;
}
/* Styling the track of the scrollbar */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Styling the thumb (the draggable scrolling handle) */
::-webkit-scrollbar-thumb {
background: orange;
border-radius: 10px;
}
/* The thumb on hover */
::-webkit-scrollbar-thumb:hover {
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>That’s it. Happy coding!
