Search code examples
htmlcssscrollbar

Scrollbar track thinner than thumb

I am trying to style a scrollbar using CSS. I want to achieve the following look (ignore the background):

enter image description here

In other words, I want the thumb to be thicker than the track, which I only want to be a line.

I have researched this and found solutions for people wanting to do the opposite. That is a thumb smaller than the track, but no way of achieving what I want.

As an alternative option, I have thought of using the border-right property with negative offset, but again no luck. The only outline has offset and outline four-sided.

Any suggestions will be appreciated.

Solution

  • There are 7 different scrollbar options to use:

    ::-webkit-scrollbar {/ * 1 - scrollbar * /}
::-webkit-scrollbar-button {/ * 2 - button * /}
::-webkit-scrollbar-track {/ * 3 - track * /}
::-webkit-scrollbar-track-piece {/ * 4 - the visible part of the track */}
::-webkit-scrollbar-thumb {/ * 5 - slider * /}
::-webkit-scrollbar-corner {/ * 6 - corner * /}
::-webkit-resizer {/ * 7 - resizing * /}

    For what you're trying to achieve, you can do this:

    ::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}