带有透明背景的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;
}

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

任何解决方案？

- Daniels Jirgensons

---

请查看这个主题：https://dev59.com/RGox5IYBdhLWcg3wWzN7 - Arkej

@Arkej 这并没有解决我的问题。 - eatmailyo

Answer 1

我现在正在使用一个jQuery滚动条，而且它运行得非常好，这是我自己问题的解决方案。

- eatmailyo

Answer 2

试一下这个

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

- Nate Hammond

Answer 3

我做了一些我想要的东西，但如何设置边缘间距并使其不透明。

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

- eatmailyo