带有透明背景的webkit滚动条

Question

我有一个包含内容的小列表，我想用 max-height 和滚动条制作它，但有一个问题。我想让它成为一个自定义滚动条。这是我的 JSFiddle。我无法设置透明背景和轨道颜色

有我的滚动条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;
}

我想制作一个滚动条，就像这张图片中的那样

有什么解决办法吗？

Answer 1

我做了我想要的东西，但是如何设置边距仍然不透明。

https://jsfiddle.net/Lfygvv3t/3/

现在我的 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);
}

Answer 2

我现在用的是 jQuery scrollbar，效果很好，这是我的解决方案，针对我自己的问题。

Answer 3

试试这个

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

带有透明背景的webkit滚动条

webkit scrollbar with transparent background

html

css

webkit

scrollbar