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 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 background is going to extend, 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 2

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 3

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

Answer 4

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

Here is nearly matching code with css. You just have to change the color or add image in ::-webkit-scrollbar-thumb try small image if you want and you may also need to adjust the position.

 .container {
      margin: 40px auto;
      width: 1000px;
      height: 200px;
      overflow-y: scroll;
    }
    .container::-webkit-scrollbar {
      width: 20px;
    }
    .container::-webkit-scrollbar-track {
      background: tomato;
      border-left: 9px solid white;
      border-right: 9px solid white;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);      
      
         /*background-image:url( http://i.imgur.com/ygGobeC.png);*/
    }
    .container .item {
      height: 20px;
      margin-bottom: 5px;
      background: silver;
    }
    .container .item:last-child {
      margin-bottom: 0;
    } 
    .container {
        direction:rtl;
      }

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

 

Answer 7

A css-only solution that does not use any images involves using the scrollbar borders to produce the desired effect. The trick is to match the scrollbar element's border colors to your container's background color. However, this won't work on complex backgrounds, like the OP's.

Example: https://jsfiddle.net/vsj6qb8c/6/

body {
  --container-background-color: #C7C7C7;
}

.outer {
    height: 150px;
    overflow-y: scroll;
  background-color: var(--container-background-color);
}

.force-overflow {
    min-height: 450px;
}

::-webkit-scrollbar {
    width: 20px;
  border-width: 5px;
}

::-webkit-scrollbar-track-piece {
    background-color: #757575;
  border-color: var(--container-background-color);
  border-width: 2px 9px 2px 9px;
  border-style: solid;
}

::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background-color: #51545E;
  border-color: var(--container-background-color);
  border-style: solid;
  border-width: 1px 7px 1px 7px;
}

Answer 8

::-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.