如何隐藏滚动条轨道答案

【问题标题】：How to hide scrollbar track如何隐藏滚动条轨道
【发布时间】：2023-03-14 23:19:01
【问题描述】：

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

它目前看起来像这样：

这是滚动条的实际 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);
}

【问题讨论】：

标签： html css angular scroll scrollbar

【解决方案1】：

您可以将 background-color 属性添加到 ::-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);
}

【讨论】：

没用，我也试过把所有的 var(--custom-white) 变成透明的，这些是背景色
尝试在行首不带*。
还是什么都没有，我相信只用css是做不到的，我会探索一些外部包
只用 CSS 就可以完成。我在我自己的项目上这样做。但我不确定为什么它不适合你。

【解决方案2】：

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

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

【讨论】：