Transparent scrollbar with css

Question

Now use this code(and many variations of this), but scroll track get dark-grey color, something like #222222 or near this. Find many examples, but all of them give same result. Opera, Chrome and firefox show this bug. How to fix?

#style-3::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: transparent;
}

#style-3::-webkit-scrollbar
{
    width: 6px;
    background-color: transparent;
}

#style-3::-webkit-scrollbar-thumb
{
    background-color: #000000;
}

Answer 1

    .scrollable-content {
      overflow-x:hidden;
      overflow-y:scroll; // manage scrollbar content overflow settings
    }
    .scrollable-content::-webkit-scrollbar {
      width:30px; // manage scrollbar width here
    }
    .scrollable-content::-webkit-scrollbar * {
      background:transparent; // manage scrollbar background color here
    }
    .scrollable-content::-webkit-scrollbar-thumb {
      background:rgba(255,0,0,0.1) !important; // manage scrollbar thumb background color here
    }

Answer 2

To control the background-color of the scrollbar you need to target the primary element, instead of -track

::-webkit-scrollbar {
  background-color: blue;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

I haven't succeed in rendering it transparent, but i did manage to set it's color.

Since this is limited to webkit, it is still preferable to use js with a polyfill: CSS customized scroll bar in div

Answer 3

With pure css it is not possible to make it transparent. You have to use transparent background image like this:

::-webkit-scrollbar-track-piece:start {
    background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}

::-webkit-scrollbar-track-piece:end {
    background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}

Answer 4

Try this one, it works fine for me.

In CSS:

::-webkit-scrollbar
{
    width: 0px;
}
::-webkit-scrollbar-track-piece
{
    background-color: transparent;
    -webkit-border-radius: 6px;
}

and here is the working demo: https://jsfiddle.net/qzsbf0tm/

Answer 5

Just set display:none; as an attribute in your stylesheet ;) It's way better than loading pictures for nothing.

body::-webkit-scrollbar{
width:9px;height:9px;
}
body::-webkit-scrollbar-button:start:decrement,body::-webkit-scrollbar-button:end:increment{
display:block;height:0;background-color:transparent;
}
body::-webkit-scrollbar-track-piece{
background-color:#FFFFFF;
opacity:0.2;

> display:none;

-webkit-border-radius:0;
-webkit-border-bottom-right-radius:14px;
-webkit-border-bottom-left-radius:14px;
}
body::-webkit-scrollbar-thumb:vertical{
height:50px;
background-color:#333333;
-webkit-border-radius:8px;
}