How to hide scrollbar track

Issue

is there any way to hide the scrollbar track but not the thumb? It should look like this:

Its currently looking like this:

This is the actual css for the scrollbar:

*::-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);
}

Solution

Just add overflow: overlay; to the body tag instead of overflow: auto. both work the same but with OVERLAY your scrollbar will be on top of content just as you want. Worked for me.

Answered By - Insaf Khan Marwat