使滚动条“thumb”比“track”更薄+Box-shadow [关闭]

【问题标题】：Make scrollbar "thumb" thinner than "track" +Box-shadow [closed]使滚动条“thumb”比“track”更薄+Box-shadow [关闭]
【发布时间】：2020-03-13 17:32:17
【问题描述】：

大家好，我正在尝试让拇指的宽度比大头钉的宽度更薄，这样我就可以在拇指上产生阴影效果（比如它看起来像拇指-栏浮动在轨道栏的顶部）。

有没有人有任何想法或者是否有可能？

提前致谢，
乔治。

【问题讨论】：

看看here
@Vishnu 我以前看过这个网站，我就是不知道怎么...虽然谢谢（：
将行添加到您的 css ::-webkit-scrollbar-track : { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); width: 20px }
@Vishnu 首先我不想要嵌入阴影，其次我希望它们在拇指上而不是在轨道上 (这就是我的观点：P）
这绝对有可能……

标签： javascript html css

【解决方案1】：

这应该可行！

body {
  font-family: sans-serif;
  height: 2000px;
}

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

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 5px 5px white, inset 0 0 0 4px black;
}

::-webkit-scrollbar-button {
  display: none;
}

应该是这样的：

你可以修改它，但如果你添加圆角，它会有点糟糕！

现在还不错：

【讨论】：

太棒了，谢谢！虽然我们能找到任何方法来修复圆角吗？
很高兴你喜欢它。我还在想我是怎么做到的，今晚我的大脑不太好。不幸的是，我认为没有任何方法可以修复圆角。
这里是一个沙盒：codesandbox.io/s/objective-microservice-xtdt8
我用圆角减少了奇怪的东西，所以你可能不会注意到。
这很有趣，这发生在线条上，但无论如何我现在对答案很满意：D（虽然我认为也可以使用径向渐变）