隐藏滚动条轨迹，但显示滚动条缩略图 [英] Hide scrollbar track but show scrollbar-thumb

问题描述

晚上好！我只是想这样改变我的滚动.

Good evening! I just wanna to change my scroll like this.

因此，该曲目似乎已隐藏.我有这样的风格

So it looks like that track is hidden. I got my style like this

::-webkit-scrollbar{
   width: 15px;
   height: 40px;
}

::-webkit-scrollbar-thumb{
   background-color: #DBDBDB;
   border: 4px solid transparent;
   border-radius: 11px;
   background-clip: content-box;
}

::-webkit-scrollbar * {
   background: transparent;
}

::-webkit-scrollbar-thumb:vertical {
   height: 90px;
}

我得到了这样的结果:

And I got such result:

所以有一个问题.我该如何使用CSS或JS做到这一点.谢谢

So there is a question. How can I do this with CSS or JS maybe. Thanks

推荐答案

我认为这可能有效:

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {

    -webkit-border-radius: 10px;

    border-radius: 10px;

    background: rgba(,0,0,0.5); 

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

您可能需要根据需要对其进行编辑.

You might have to edit it according to your need.

这篇关于隐藏滚动条轨迹，但显示滚动条缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！