CODEWITHSUNDEEP
csswebkitscrollbar
Rudie
Rudie

Reputation: 53890

Style webkit scrollbar on certain state

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

Upvotes: 10

Views: 44129

Answers (3)

AlexS
AlexS

Reputation: 11

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

Upvotes: 1

Michael
Michael

Reputation: 2038

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 */ }

Upvotes: 15

mrtsherman
mrtsherman

Reputation: 39902

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?

Upvotes: 7

Related Questions