隐藏滚动条轨道但显示滚动条 - 拇指

时间:2017-03-06 19:57:48

标签: html css scrollbar

晚上好!我只是想像这样改变我的卷轴。 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;
}

我得到了这样的结果: result

所以有一个问题。我怎么能用CSS或JS做这个呢。 感谢

1 个答案:

答案 0 :(得分:1)

我认为这可能有效:

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

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