滚动条轨道比拇指细

Question

我正在尝试使用 CSS 设置滚动条的样式。我想实现以下外观（忽略背景）：

换句话说，我希望拇指比轨道粗，我只想成为一条线。

我对此进行了研究，并为想要做相反事情的人找到了解决方案。这比轨道小一个拇指，但无法实现我想要的。

作为另一种选择，我曾想过使用带有负偏移量的 border-right 属性，但还是没有运气。唯一的轮廓有偏移和轮廓四边。

任何建议将不胜感激。

Answer 1

我相信我找到了答案。我今天遇到了同样的问题；我很想使用 Javascript。虽然我是那种 CSS 类型的人...

如果您想知道滚动条的每个部分与 css 的哪个部分相关联；那么您可能首先要查看自定义滚动条的 CSS 技巧帖子。（这对我帮助很大）

这里的技巧是让滚动条与您的“拇指”具有相同的宽度。然后你会想要给“轨道”一个透明的背景，一个背景图像。垂直重复背景图像，您将拥有一个漂亮的滚动条。

为了证明这一点，我有一张宽 8 像素、高 1 像素的图像。只有中间的 2 个像素是蓝色的。你可以在这里找到图片。

请注意，图像是 8 像素，因为在我的 css 中，滚动条是 8 像素宽。

现在 CSS 需要发挥作用。所以我们要做以下工作。

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

为了帮助演示，我安排了一个小片段。请注意，我将滚动条限制为divs，为此，您只需要删除div之前的 each ::。( ^ 或者只使用上面的 CSS ^ )

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

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

Answer 2

有 7 种不同的滚动条选项可供使用：

::-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 {
    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 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}

此解决方案基于@Nizar 的方法，但适用于使用 1 个图像的水平和垂直滚动条。该图像是从 Nizar 方法中的 8x2 缩小的 2x2。这利用了 :horizo​​ntal 和 :vertical 选择器。但请注意，我不确定浏览器可能不兼容。

图像可以是任何大小，2x2、1x1 等，它基本上定义了线条的大小。2x2 将只是 2 像素深度线。

Answer 4

这是与 css 几乎匹配的代码。您只需要更改颜色或在 ::-webkit-scrollbar-thumb 中添加图像，如果需要尝试小图像，您可能还需要调整位置。

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

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!