css 如何隐藏滚动条轨迹

4xy9mtcn  于 2023-04-01  发布在  其他
关注(0)|答案(5)|浏览(135)

有没有什么方法可以隐藏滚动条轨迹而不隐藏滚动条?它应该看起来像这样:

它目前看起来像这样:

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

pprl5pva1#

只需将overflow: overlay;添加到body标签中,而不是overflow: auto。两者的工作原理相同,但使用OVERLAY,您的滚动条将如您所愿位于内容的顶部。对我有效。

cvxl0en2

cvxl0en22#

你可以将background-color属性添加到::-webkit-scrollbar并将其设置为transparent。

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

z6psavjg3#

好吧,因为我尝试了所有的CSS和没有工作,我想这将是最好的使用外部包,帮助我实现这一点非常非常容易。
我用的是this library,它非常容易设置和使用。我所要做的就是安装和使用它的组件。在wiki上有一个使用的例子,它非常友好和可定制。

d8tt03nd

d8tt03nd4#

*::-webkit-scrollbar {
    border: none;
    background-color: transparent;
 } /* webkit browsers(safari, chrome) */

*{
    scrollbar-color: #404040b3 transparent; /*firefox*/
 }

这就是最后对我起作用的。

fgw7neuy

fgw7neuy5#

简单的回答:

*::-webkit-scrollbar-track {
    display: none;
    background-color: var(--custom-white);
}

相关问题