Question

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

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

我已经研究过这个问题，并为那些想要做相反事情的人找到了解决方案，那是一个比轨道小的拇指，但没有达到我想要的目的。

作为一种替代选择，我考虑过使用具有某种负偏移的border-right属性，但是再次没有运气。只有轮廓有偏移，轮廓总是四边形。

任何建议都非常感谢。

Answer 1

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

如果您想知道滚动条的每个部分与css的哪个部分相关联;那么你可能首先要检查Custom Scrollbars的CSS技巧帖子。

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

为了证明这一点，我的图像宽8像素，高1像素。只有中间的2个像素为蓝色。您可以找到图片here。

请注意，图像为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，为此，您只需在每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>

Answer 2

纯CSS解决方案

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

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

| readFileStream citiesCollection |

readFileStream := 'C:\t\so\smalltalk\fruitVendor.txt' asFilename readStream.
citiesCollection := OrderedCollection new.

readFileStream linesDo: [ :eachLine |
    | cities |
    cities := (eachLine splitBy: $;) collect: [ :eachCity | eachCity withoutSpaces ].
    citiesCollection add: cities asArray
].

citiesCollection inspect.

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

Answer 4

据我所知，使用纯CSS无法实现这种特殊效果，因为这些天滚动条样式非常有限。此外，FireFox不允许自定义滚动条样式，因此您必须使用插件进行跨浏览器样式设置。

下面的jQuery插件似乎与您发布的内容非常相似，并且推荐了很多。我自己没有尝试过，但jQuery插件往往很容易实现并根据您的需求进行定制。

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

Answer 5

::-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张图像的水平和垂直滚动条。图像为2x2，与Nizar的方法中的8x2相比有所减少。这利用了：horizontal和：vertical选择器。但请注意，我不确定浏览器可能不兼容。

图片可以是2x2、1x1等任意大小，例如，它实质上定义了线条的大小。 2x2就是2像素深度线。

Answer 6

一个不使用任何图像的纯css的解决方案涉及使用滚动条边框来产生所需的效果。诀窍是使滚动条元素的边框颜色与容器的背景颜色匹配。但是，这不适用于OP等复杂的背景。

示例：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 7

简单的CSS解决方案，以显示比轨道更粗的手柄。仅在Chrome中可以正常运行。这可能对需要此功能的人有所帮助。

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

我知道这是一个旧线程，但是我遇到了同样的问题，并且由于我的背景不是纯色，并且滚动条要在具有不同背景的多个页面上使用，因此我需要另一个解决方案。我想通了。

create or replace temporary view my_keys as
select
policy_num,
prsn_id,
max(eff_dt) as eff_dt
from prsn_dtl
group by 1, 2;

该技巧隐藏在“背景剪辑”部分中。 Background-clip可以让您定义背景的延伸程度，并且使用padding-box可以使背景延伸到边界，而不会超出边界，因此当您使用透明边界时，不会得到定义的背景颜色，但使用父元素背景。

希望这对某人有帮助！

Answer 9

这是滚动条选项

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

滚动条轨道比拇指更薄

9 个答案: