有没有什么方法可以隐藏滚动条轨迹而不隐藏滚动条?它应该看起来像这样:
它目前看起来像这样:
这是滚动条的实际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;
}
5条答案
按热度按时间pprl5pva1#
只需将
overflow: overlay;
添加到body
标签中,而不是overflow: auto
。两者的工作原理相同,但使用OVERLAY,您的滚动条将如您所愿位于内容的顶部。对我有效。cvxl0en22#
你可以将background-color属性添加到::-webkit-scrollbar并将其设置为transparent。
z6psavjg3#
好吧,因为我尝试了所有的CSS和没有工作,我想这将是最好的使用外部包,帮助我实现这一点非常非常容易。
我用的是this library,它非常容易设置和使用。我所要做的就是安装和使用它的组件。在wiki上有一个使用的例子,它非常友好和可定制。
d8tt03nd4#
这就是最后对我起作用的。
fgw7neuy5#
简单的回答: