Scrollbar track thinner than thumb

问题

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 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 about maybe using the border-right property with some sort of negative offset, but again no luck. Only outline has offset and outlines are always four-sided.

Any suggestions much appreciated.

回答1:

this is scrollbar options

:: - 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 * /}

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

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

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

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

回答3:

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

回答4:

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

回答5:

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>

 

回答6:

As far as I can tell it is not possible to achieve this particular effect with pure CSS, as scroll bar styling these days is very limited. Also FireFox wont allow custom scroll bar styles so you will have to use a plugin for cross browser styling.

The jQuery plugin below seems to have very similar styles to what you have posted and is recommended a lot. I haven't tried it myself but jQuery plugins tend to be quite simple to implement and customize to your needs.

http://manos.malihu.gr/jquery-custom-content-scroller/

来源：https://stackoverflow.com/questions/41173310/scrollbar-track-thinner-than-thumb