如何隐藏滚动条轨道

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

Answer 1

您只需将背景色属性添加到您的 ::-webkit-scrollbar 并将其设置为透明即可。

::-webkit-scrollbar {
    background-color: transparent;
    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);
}

Answer 2

好吧，因为我用 CSS 尝试了所有方法，但没有任何效果，我认为最好使用一个外部包来帮助我非常轻松地实现这一目标。

我使用了 this library，它非常易于设置和使用。我所要做的就是安装它并使用该组件。在 wiki 中，他们有一个使用示例，它对新手非常友好且可自定义。

Answer 3

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

如何隐藏滚动条轨道

How to hide scrollbar track

html

css

angular

scroll

scrollbar