Scrollbar track thinner than thumb

Question

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

In other words, I want the thumb to be thicker than

Answer 1

Pure css solution

    .item-container::-webkit-scrollbar {
         background-image: linear-gradient(to right,white 50%, grey 50%,white 51%);
    }

    .item-container::-webkit-scrollbar-thumb {
        background-color: grey;
        border-radius: 10px;
    }

    .item-container{
      overflow: auto;
      height: 200px;
      width: 200px;
    }

    .item-container div{
      height: 100px;
    }

    <div class="item-container">
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
    </div>

Answer 2

I know it's an old thread, but I had same issue and since my background isn't solid color and scrollbar is to be used on multiple pages with different backgrounds I needed another solution. And I figured it out.

.scrollbar::-webkit-scrollbar {
  width: 7px; //Needed scrollbar thumb width to be 7px, so had to define whole scrollbar to be 7px wide.
};

.scrollbar::-webkit-scrollbar-thumb {
  background: brown;
};

.scrollbar::-webkit-scrollbar-track {
  background: black;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  background-clip: padding-box;
};

The trick is hidden in the "background-clip" part. Background-clip lets you define how much does background extends, and with padding-box it will let background extend up to border and not let it go under, so when you use transparent border, you're not getting the background color that is defined, but parent element background.

Hope this helps someone!

Answer 3

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 4

::-webkit-scrollbar-track{background-image:url("https://i.imgur.com/s19YkhR.png");background-position:center}
::-webkit-scrollbar-track:horizontal{background-repeat:repeat-x}
::-webkit-scrollbar-track:vertical{background-repeat:repeat-y}

This solution is based on @Nizar's approach but works for both Horizontal and Vertical scrollbars using 1 image. The image is a 2x2 which is reduced from a 8x2 from Nizar's approach. This utilizes :horizontal and :vertical selectors. But do note there may be browser incompatibility i'm unsure.

The image can be any size, 2x2, 1x1, e.t.c it essentially defines the size of the line. A 2x2 will just be a 2 pixel depth line.

Answer 5

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

Answer 6

Simple CSS solution to show handle thicker than track. It works fine in Chrome only. It may help for someone who needs this.

/* To set scrollbar width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 9px;
  border: 2px solid white;  /* Use your background color instead of White */
  background-clip: content-box;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 9px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}