10

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
tshepang
  • 12,111
  • 21
  • 91
  • 136
Rudie
  • 52,220
  • 42
  • 131
  • 173

3 Answers3

15

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 */ }
Michael
  • 1,968
  • 4
  • 24
  • 40
  • 1
    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. – Rudie Oct 04 '13 at 12:48
  • Ah, I see. Yeah, looks like that's not possible with pure CSS. – Michael Oct 04 '13 at 18:36
  • 1
    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. – diggie Apr 26 '14 at 17:38
7

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?

mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • Huh yeah... This is sort of what I was going for: http://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 Dec 26 '11 at 16:02
  • Maybe the pseudo (scrollbar) elements don't have hover states... Or a hierarchy. That would suck. – Rudie Dec 26 '11 at 16:04
  • Changing the thumb color on hover works for me too - http://jsfiddle.net/QcqBM/3/ – mrtsherman Dec 27 '11 at 04:07
  • 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?? – Rudie Dec 27 '11 at 14:44
  • 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. http://jsfiddle.net/QcqBM/6/ – mrtsherman Dec 27 '11 at 19:47
  • It's possible to accomplish all of these things with pure CSS. (At least with Chrome version 29.) See my answer here: http://stackoverflow.com/a/19171215/136590 – Michael Oct 04 '13 at 00:26
0

There's a very easy way to do it -- just add the webkit scrollbar in the CSS using class, then remove it from your element using classList.remove on your element.

A few more details here

AlexS
  • 1
  • 1