Styling ::-webkit-scrollbar-track not working

user_3683643 0
Viewed 30121

I'm trying to style the track of the scroll bar. Whenever I style the track:

 div::-webkit-scrollbar-track {
    background-color: blue;
 }

Nothing changes.

Whenever I style the scrollbar:

div::-webkit-scrollbar {
    background-color: blue;
}

The entire scroll bar is blue, no visible thumb

What am I missing here?

Edit:

I'm working in Chrome. What's odd is that the scroll bars in all my overflow containers just started showing up. Before they were invisible and the scroll thumb would only appear when hover or scrolling (can't remember which, but it definitely wasn't always there). Firefox seems to be giving the desired behavior.

Did something change with Chrome scrollbars lately?

scroll css
3 Answers

I know this thread is a few years old but I want to add a general answer to why it wasn't working. From my experience

you always have to set at least some attribute (like e.g. the background-color) of the whole ::-webkit-scrollbar { }

to be able to edit the ::-webkit-scrollbar-thumb { } and other parts of the scrollbar.

Hope this increases the general understanding.

user_148240670

What worked for me in Chrome, since I was having the same issue, was targeting the entire HTML page by doing this in CSS

html::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

html::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

html::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}
user_151014240
Related