23

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?

Improve this question

3 Answers 3

Reset to default
53

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.

Improve this answer
3
  • 3
    Thank you, this had caught me out as I was using ::-webkit-scrollbar:horizontal and ::-webkit-scrollbar:vertical but not just ::-webkit-scrollbar by itself.
    – Phil Wolstenholme
    Commented Jul 20, 2021 at 17:14
  • 1
    Thank you, Master Skywalker!
    – qz-
    Commented Jul 4, 2022 at 15:05
  • Adding one possible mistake for others that might read this post ;) In my case, I had done ::-webkit-scrollbar-thumb { color: green } instead of ::-webkit-scrollbar-thumb { background-color: green }...easy mistake to make, but this fixed it for me!
    – Emma Earl Kent
    Commented Jul 25, 2022 at 16:57
17

Try the following snippet for styling your scrollbar.

Note: This only works on -webkit browsers like chrome, safari because there are not W3C standard for CSS and therefore most browsers just ignore them.

div {
  width: 400px;
  height: 150px;
  overflow: auto;
}

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

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

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, nunc ut porta euismod, purus leo suscipit ante, quis hendrerit sem velit ut tellus. Aenean justo lorem, viverra tristique malesuada quis, rhoncus sodales turpis. Donec a tempus felis.
  Morbi faucibus eros nec leo facilisis lacinia. Nam at erat ac augue semper ultricies vitae nec erat. Donec et dapibus felis, vitae placerat magna. Aliquam non magna nec orci scelerisque lobortis.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, nunc ut porta euismod, purus leo suscipit ante, quis hendrerit sem velit ut tellus. Aenean justo lorem, viverra tristique malesuada quis, rhoncus sodales turpis. Donec
  a tempus felis. Morbi faucibus eros nec leo facilisis lacinia. Nam at erat ac augue semper ultricies vitae nec erat. Donec et dapibus felis, vitae placerat magna. Aliquam non magna nec orci scelerisque lobortis.
</div>

Improve this answer
2
  • Well, that's working. Thank you. Perhaps I was having problems because I built the scroll styling as a SASS extension. In any case, it still doesn't have the desired behavior where the scroll bar only appears when being scrolled. I just checked scrolling on another machine (same OS and same Chrome version), and the scrollbar disappears when not being scrolled, as expected. Whereas on the machine I'm using now, I have scrollbars all over the place for reasons unknown. Firefox on this same machine is not having this problem. Did I hack my Chrome on accident or something?
    – skwny
    Commented May 27, 2017 at 4:04
  • 1
    Thank you! Couldn't get any of the examples/tutorials I found to work with Edge. This one finally did. Great style too.
    – eaglei22
    Commented Apr 16 at 17:34
0

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;
}
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.