Is there a method to conceal the track of the scrollbar while keeping the thumb visible? The desired appearance is shown in the following image:
https://i.sstatic.net/6TqmM.png
However, the current view is as follows:
https://i.sstatic.net/tdJq3.png
The CSS code responsible for styling the scrollbar is given below:
*::-webkit-scrollbar {
width: 10px;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--dark-blue) var(--custom-white);
}
*::-webkit-scrollbar-track {
background-color: var(--custom-white);
}
*::-webkit-scrollbar-thumb {
background-color: var(--dark-blue) ;
border-radius: 20px;
border: 3px solid var(--custom-white);
}The revised and finalized CSS code to achieve the desired effect is provided below:
*::-webkit-scrollbar {
background-color: transparent;
width: 15px;
}
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 4px solid transparent;
background-color: rgba(0,0,0,0.2);
background-clip: content-box;
}