滚动条轨迹比拇指细 [英] Scrollbar track thinner than thumb

问题描述

我正在尝试使用css设置滚动条的样式，并且希望获得以下外观(忽略背景):

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.

作为一种替代选择，我考虑过也许使用带某些负偏移量的border-right属性，但同样没有运气.只有轮廓线有偏移，轮廓线总是四边形.

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.

任何建议都值得赞赏.

推荐答案

有7种不同的滚动条可供使用:

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

这篇关于滚动条轨迹比拇指细的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！