Make Scrollbar track transparent

Question

There are few questions here that ask the same but their solutions don't work for me.

This is a picture from one of those questions and what I want to achieve. I have a list and when there are more items, scrollbar shows up.

I also set the overflow-y to be overlay since I don't want the scrollbar to add to the width of the list. How can I make the track transparent so the items underneath can be seen?

Track overlapping content

[Updated]: Fiddle to show how it looks now, the picture is what I want to get.

p {
overflow-y: overlay;
width: 101%; }

https://jsfiddle.net/yk1cverh/2/

Answer 1

You can add the following in your css code:

body::-webkit-scrollbar {
  width: 0.7em;
  background: white;
}
body::-webkit-scrollbar-thumb {
  background: #c0392b;
  height:30px;
}

body::-webkit-scrollbar-track-piece
{
   display:none;
}

In this part:

body::-webkit-scrollbar {
  width: 0.7em;
  background: white;
}

You can change the background: white; to any color you want. You probably need to make it similar to your body's background color or set it to transparent.

Here is a JS Fiddle that demonstrates it.

https://jsfiddle.net/qzsbf0tm/687/