How to make thin scrollbar in chrome?

Question

I have make thin scrollbar in Firefox for this css:

  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.5) transparent; 

it's worked for firefox.

Now i need to make thin scrollbar in chrome. I have tried this css

*-webkit-scrollbar {
  width: 9px;
}
*-webkit-scrollbar-track {
  background: transparent;
}
*-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

But this code does not work in chrome.

Any suggestion please.

Racklin

Looks like you need to replace * with ::. #17480587 – Jameejamel

Answer 1

Try this:-

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

Werner

To customize horizontal scrollbars too, set height: 9px. More details: #44334606 – Gum

Answer 2

chrome://flags/ Overlay Scrollbars = Enabled

Ultravirus

That would require each user setting the chrome flags themselves, which is not a viable solution. – Passmore

This is the only answer I expected to find. So upvote anyway:) – Jutta

Doesn't work in other browsers – Straphanger