Why my scrollbar track becomes transparent?

Question

I faced very strange effect. As soon as I add those two lines in scss my scrollbar track becomes transparent in Chrome (Firefox okay). I know many people looking for that but in my case it is undesirable.

div::-webkit-scrollbar{width:0.4rem;}
div::-webkit-scrollbar-thumb{background-color:red;} 

Furthermore, it happens only if I change width of the scrollbar. If I remove the first line in the code above, thumb color stops to be respected and the entire scrollbar becomes default.

The same I see in the Chrome inspect panel: no other styling elements to the scrollbar, if I uncheck width, red color disappears but still present as valid in the inspect.

Any ideas?

Answer 1

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ccc; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #454; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>

Answer 2

Here is the cross-browser support scrollbar CSS

/*============================
     CrossBrowser ScrollBar
  ============================*/
* {
    scrollbar-width: thin;
    scrollbar-color:  rgba(89, 203, 157, 0.8) rgba(0, 0, 0, 0.099);
}

::-webkit-scrollbar
{
    width: 5px;  /* for vertical scrollbars */
    height:  auto; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
    background: rgba(0, 0, 0, 0.099);
}

::-webkit-scrollbar-thumb
{
    background: rgba(89, 203, 157, 0.8);
    border-radius: 30px;
}