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

Question

晚上好！我只想像这样改变我的滚动条。

所以看起来那个轨道是隐藏的。我的样式是这样的：

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

我得到了这样的结果： 所以问题来了，我怎么用CSS或JS来实现这个呢？谢谢。

- Mad Max

---

看起来你的滚动条没有获取到所有的HTML代码。所有标签都关闭了吗？ - user2402509

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

你可能需要根据你的需求进行编辑。

- kushagra-aa

Answer 2

为了解决问题，您必须首先在body标签中添加overflow: overlay;，它的作用与overflow: auto;相同，但它会覆盖在内容上方而不是侧面。

然后只需添加以下内容：

*::-webkit-scrollbar {
  background-color: transparent;
  width: 12px;
}
*::-webkit-scrollbar-track {
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  border-radius: 20px;
  border: 3px solid transparent;
  background-color: rgba(0,0,0,0.3);
  background-clip: content-box;
}

并根据您的喜好调整颜色和宽度，不客气！

- Javier Jerez