如何隐藏滚动条轨道

Question

有没有办法隐藏滚动条轨道而不是拇指？它应该看起来像这样：

它目前看起来像这样：

这是滚动条的实际 CSS：

*::-webkit-scrollbar {
    width: 10px;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--dark-blue) var(--custom-white);
}
*::-webkit-scrollbar-track {
    background-color: var(--custom-white);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--dark-blue) ;
    border-radius: 20px;
    border: 3px solid var(--custom-white);
}

最终代码：

*::-webkit-scrollbar {
  background-color: transparent;
  width: 15px;
}
*::-webkit-scrollbar-track {
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  border-radius: 20px;
  border: 4px solid transparent;
  background-color: rgba(0,0,0,0.2);
  background-clip: content-box;
}

Answer 1

只需添加overflow: overlay;到body标签而不是overflow: auto. 两者的工作方式相同，但使用 OVERLAY 时，您的滚动条将如您所愿地位于内容之上。为我工作。

Answer 2

接受的答案不再正确，并且一年前发布时就已经具有误导性。

Overlay 不是官方 CSS 规范的一部分。我仅受 webkit 引擎支持，后来被弃用并最终被删除。目前的overflow: overlay行为是auto这样的，所以不应该使用它。

根据Can I Use 的数据，目前的支持率仅为 8%，并且还会下降。

现在正确的答案是 - 用纯 CSS 不可能实现这种效果，因为overflowor没有这样的属性webkit-scrollbar。

如果有人真的需要这个 - JS 必须让我参与。当然，还有像Simplebar这样的现成库。