Learn good-looking custom scroll bars in 1 minute

design sketch

css

/* Define the height, width and background of the scroll bar   The height and width correspond to the size of the horizontal and vertical scroll bars respectively */
::-webkit-scrollbar
{
    
	width: 2px;
    border-radius: 1.5px;
    background-color: transparent;
}

/* Define the scroll bar track   Inner shadow + Round corners   Sliding track */
::-webkit-scrollbar-track
{
    
    background: #F5F5F6;
    border-radius: 1.5px;
}
 
/* Define slider   Inner shadow + Round corners   It refers to the blue one   slider */
::-webkit-scrollbar-thumb
{
    
	background: #4E6EF2;
    border-radius: 1.5px;
}