webkit滚动条与透明背景

Question

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

有我的Scrollbar 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

我现在正在使用jQuery scrollbar，而且效果非常好，这是我的解决方案，对于我自己的问题。

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

Answer 3

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

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

现在我的CSS看起来像这样

<div ng-controller="MainController as main">
    <div id="sradha" ng-show="main.myValue" >Show-side-bar</div>
</div>