While attempting to create a custom scrollbar, I encountered an issue with the image of the scrollbar not displaying properly when the background color is changed. Specifically, when the background color is dark (such as black), the scrollbar blends in and becomes invisible. Is there a way to obtain a white background image for the scrollbar in base64 format?
Here is my current code: https://jsbin.com/nivepoyoye/edit?html,css,output
<div class="abc pqr" style="background:#000">
asdasdasdasdasdasdasdasdasdasdasdasdasdas
sdasd
</div>
I am still facing issues with the scrollbar not displaying correctly.
.pqr::-webkit-scrollbar-thumb {
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAALCAIAAADa28u7AAAABnR...
background-position:0 50%;
background-repeat:repeat-x;
/* background-color:#fff
*/ }
.pqr::-webkit-scrollbar {
height: 18px;
}
Could someone guide me on where to find a white scrollbar image in base64 format so that it enhances the overall look of the scrollbar?