Style webkit scrollbar on certain state

Question

I'd like my WebKit scrollbars to have a different color when its container is hovered over. I want the entire scrollbar to light up.

I was thinking something like this would do the trick (but it doesn't):

.scroller:hover::-webkit-scrollbar {
  background: green;
}

I've styled the scrollbars the same way: on .scroller, not globally. (That works: .scroller::-webkit-scrollbar) I want the overflowed divs special, not the document.

Another (related) problem: light up the thumb when hovering over the scrollbar. This doesn't work:

.scroller::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb

Solution 1

Changing the background color works just fine for me.

http://jsfiddle.net/QcqBM/1

div#container:hover::-webkit-scrollbar {
    background: lightyellow;
}

Are you sure there isn't something else wrong with your CSS call?

Solution 2

This is possible using pure CSS, at least with Chrome version 29.

http://jsfiddle.net/eR9SP/

To style the scrollbar when its container (in this case .scroller) is hovered over, use:

.scroller:hover::-webkit-scrollbar { /* styles for scrollbar */ }
.scroller:hover::-webkit-scrollbar-thumb { /* styles for scrollbar thumb */ }
.scroller:hover::-webkit-scrollbar-track { /* styles for scrollbar track */ }

Additionally, you can style the scrollbar thumb itself when it's hovered over or active (being clicked) using the following:

.scroller::-webkit-scrollbar-thumb:horizontal:hover,
.scroller::-webkit-scrollbar-thumb:vertical:hover { /* hover thumb styles */ }
.scroller::-webkit-scrollbar-thumb:horizontal:active,
.scroller::-webkit-scrollbar-thumb:vertical:active { /* active thumb styles */ }

Comments

[Rudie]

Huh yeah... This is sort of what I was going for: jsfiddle.net/rudiedirkx/QcqBM/2 And how about the other related problem? Hovering over the scrollbar to light up the scrollbar-thumb. (I used track instead of thumb a few times, my bad.)

[Rudie]

Maybe the pseudo (scrollbar) elements don't have hover states... Or a hierarchy. That would suck.

[mrtsherman]

Changing the thumb color on hover works for me too - jsfiddle.net/QcqBM/3

[Rudie]

That's on .scroller:hover. I want the thumb color to change on scrollbar:hover. But that would require some hierarchy: .scroller::scrollbar:hover ::thumb and that doesn't seem to work. Or am I doing it wrong again??

[mrtsherman]

Sorry, I finally get it now. I don't think this is doable because the pseudo elements belong to the parent element. They aren't hierarchical to one another. You should be able to make it work with javascript. Here is an example using jQuery to get the effect you want. jsfiddle.net/QcqBM/6

[Michael]

It's possible to accomplish all of these things with pure CSS. (At least with Chrome version 29.) See my answer here: stackoverflow.com/a/19171215/136590

[Rudie]

I want to highlight the thumb when you hover over the track, which would look something like: .scroller::track:hover ::thumb, but scrollbar pseudo elements don't have hierarchy so I think it's not possible.

[Michael]

Ah, I see. Yeah, looks like that's not possible with pure CSS.

[diggie]

Also, this doesn't seem to work for adjusting the width/height of the scrollbar. For example: .scroller::-webkit-scrollbar:hover {background:yellow;width:20px} Will change the background-color to yellow when hovering, but the width will not be changed.