Html 具有透明背景的webkit滚动条

我有一个包含内容的小列表，我想用

max height

和滚动条来制作，但有一个问题。我想让它成为一个自定义滚动条。这是我的。我无法设置透明背景和轨迹颜色

这是我的滚动条CSS

.uploaded-files::-webkit-scrollbar{
    -webkit-appearance: none;
    width: 11px;
}

.uploaded-files::-webkit-scrollbar-track{
    margin: 7px 0;
}

.uploaded-files::-webkit-scrollbar-thumb{
    border-radius: 12px;
    border: 4px solid rgba(255,255,255,0);
    background-clip: content-box;
    background-color: #a0a0a0;
}

我想制作一个滚动条，如图中所示

---

有什么解决办法吗？

我做了一些我想要的东西，但是如何从侧面设置边距，它仍然不透明

现在我的CSS看起来像这样

.uploaded-files::-webkit-scrollbar-track{
    border-radius: 10px;
    margin:7px 0;
    background-color: rgba(27, 30, 50, 0.15);
}

.uploaded-files::-webkit-scrollbar{
    width: 3px;
    background-color: transparent;
}

.uploaded-files::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: rgba(27, 30, 50, 0.3);
}

我现在使用的是a，它工作得很好，这是我的解决方案，针对我自己的问题。

试试这个

.uploaded-files::-webkit-scrollbar{
    -webkit-appearance: none;
    width: 4px;
}

.uploaded-files::-webkit-scrollbar-track{
    margin: 7px 0;
    border-radius: 10px;
    background-color: #e1e1e1;
}

.uploaded-files::-webkit-scrollbar-thumb{
    border-radius: 4px;
    border: 0px solid rgba(255,255,255,0);
    background-clip: content-box;
    background-color: #a0a0a0;
}

---

检查此主题：@Arkej这对我的问题没有帮助。