webkit scrollbar with transparent background

Question

I have a little list with content, that I want to make with max-height and scrollbar, but there is one problem. I want to make it a custom scrollbar. There's is my JSFiddle. I can't set a transparent background and track color

There is my 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;
}

I want to make a scrollbar, like this in this image

Any solutions?

Check this topic: http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div — Arkej, Nov 15 '16 at 08:59

score 0 · Accepted Answer · answered Jan 18 '17 at 11:10

0

Im using a jQuery scrollbar now, and it works very well, and this is my solution, for my own question.

answered Jan 18 '17 at 11:10

eatmailyo

670
1
12
33

score 0 · Answer 2 · answered Feb 25 '21 at 18:22

try this

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

score -1 · Answer 3 · answered Nov 15 '16 at 09:13

I made something what I want ,but how to set a margin from the sides and still it doesnt transparent.

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

Now my CSS look like this

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

webkit scrollbar with transparent background

3 Answers3