滚动条轨道比拇指细

Question

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

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

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

作为替代选项，我考虑过使用带负偏移的 border-right 属性，但还是没有成功。唯一的轮廓有偏移和轮廓四边。

任何建议将不胜感激。

原文由 Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Aram Mnatsakanyan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我相信我找到了答案。我今天遇到了同样的问题；我很想使用 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;
}

为了帮助演示，我安排了一个小片段。请注意，我将滚动条限制为 div s，为此，您只需要在每个 :: -69f 之前删除 div ( ^ 或者只使用上面的 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;
}

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

原文由 Nizar 发布，翻译遵循 CC BY-SA 4.0 许可协议