Scrollbar track thinner than thumb

Question

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

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.

Answer 1

I believe I found an answer. I had the same issue today; I was tempted to use Javascript. I am that CSS type of guy though...

If you wish to know what each part of the scrollbar associates to which part of the css; then you might first of all want to check the CSS Tricks post for Custom Scrollbars. (That helped me a lot)

The trick here is to give the scrollbar the same width as your "thumb". Then you will want to give the "track" a transparent background, with a background image. Repeat the background image vertically, and you'll have yourself a good looking scroll bar.

To demonstrate that, I have this image that is 8 pixels wide and 1 pixel tall. Only the middle 2 pixels are colored blue. You can find the image here.

Please note that the image is 8 pixels because in my css, the scrollbar is 8 pixels wide.

Now the CSS needs to come into play. So we're gonna do the following.

::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track { 
    width: 8px;
    border: none;
    background: transparent;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
::-webkit-resizer {
    display: none;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #1A5FAC;
}

::-webkit-scrollbar-track {
    background-image: url("https://i.imgur.com/GvV1R30.png");
    background-repeat: repeat-y;
    background-size: contain;
}

To help with demonstration, I arranged a small snippet. Note that I restricted the scrollbar to divs and for that, you'll only need to remove the div before every ::. ( ^ Or just use the CSS above ^ )

::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track { 
    width: 8px;
    border: none;
    background: transparent;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
::-webkit-resizer {
    display: none;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #1A5FAC;
}

::-webkit-scrollbar-track {
    background-image: url("https://i.imgur.com/GvV1R30.png");
    background-repeat: repeat-y;
    background-size: contain;
}

/* CUSTOM STYLING HERE - IGNORE */

div {
    width: 500px;
    height: 160px;
    margin: auto auto;
    overflow-x: hidden;
    overflow-y: auto;
}

hr {
    width: 450px;
    height: 160px;
    border: none;
    margin: 0 auto;
    background-color: #FFFFFF;
}
  hr:nth-of-type(1) { background-color: #5BC0EB; }
  hr:nth-of-type(2) { background-color: #FDE74C; }
  hr:nth-of-type(3) { background-color: #9BC53D; }
  hr:nth-of-type(4) { background-color: #E55934; }
  hr:nth-of-type(5) { background-color: #FA7921; }

<div><hr /><hr /><hr /><hr /><hr /></div>

Answer 2

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;
}