How to add a additional hover effect to scroll-bar

Question

In my css I have changed the style of sroll bar and it looks like

body::-webkit-scrollbar {
  width: 0.7em;
}
body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(154,165,159,0.5);
}
body::-webkit-scrollbar-thumb {
  background-color: #D0CACD;
  outline: 1px solid LightGrey;
  box-shadow: 7px 7px 50px grey;
}

It works. And if I add hover:

body::-webkit-scrollbar-thumb:hover {
  background-color: #b8c0bc; 
}

Then also it works when I add the webkit animation to it then why does it not works. After adding webkit animation then it totally looks like:

body::-webkit-scrollbar-thumb:hover {
  background-color: #b8c0bc;
  -webkit-animation: scrollbig 1s; 
  animation: scrollbig 2s; 
}

The animation does not play. Why ? I am using google chrome. And you can also see the @keyframe animation code:

@-webkit-keyframes scrollbig {
  from {width: 0.6em;}
  to {width: 0.9em;}
}

Please tell how to make the animation works. A Special Thanks.

The only thing I could imagine is that it's just not possible to animate a scrollbar. I've never seen a website with an animated scrollbar and would not see a reason why this should be done. But maybe someone else knows more about that. — Lunaetic, May 20 '15 at 12:49
Wait a second, -webkit-scrollbar-thumb does not select the scrollbar itself. You should try out -webkit-scrollbar as the element to use the animation on. See reference [here](https://css-tricks.com/almanac/properties/s/scrollbar/) — Lunaetic, May 20 '15 at 12:57
Well then I believe that it just isn't possible to animate your scrollbar /: — Lunaetic, May 21 '15 at 05:59
There is already an answer in another same question. https://stackoverflow.com/a/69820772/9854149 — weiya ou, Nov 03 '21 at 07:03

score 6 · Answer 1 · answered May 30 '15 at 14:26

As I can see it, there is a couple of reason to why this doesn't work.

You can't set the width of body::-webkit-scrollbar-thumb. It will always be the same as body::-webkit-scrollbar.

You can't change the width of body::-webkit-scrollbar on :hover. With or without an animation.

body::-webkit-scrollbar {
    width: 0.7em;
}

body::-webkit-scrollbar:hover {
    width: 0.9em; // Will be ignored
}

The from value of the keyframes rule will be set. But any animation on a scrollbar pseudo-element simply will not play.

body::-webkit-scrollbar-thumb {
    background: yellow; // Scroll thumb is yellow
}

body::-webkit-scrollbar-thumb:hover {
    -webkit-animation: scrollbig 1s;
}

// 0% = from, 100% = to
@-webkit-keyframes scrollbig {
    0% {background: red;} // Scroll thumb is red
    1% {background: green;} // Will be ignored
    100% {background: blue;} // Will be ignored
}

Transitions are also ignored.

body::-webkit-scrollbar-thumb {
    background: yellow; // Scroll thumb is yellow
    transition: background 2s; // Will be ignored
}

body::-webkit-scrollbar-thumb:hover {
    background: red; // Scroll thumb is red
}

You can change the width of a scrollbar on hover. See my answer — Ben Taliadoros, Oct 05 '16 at 16:56

score -1 · Answer 2 · answered Oct 05 '16 at 16:57

-1

This will change the width, unfortunately transitions still are not supported. (This is in sass)

 ::-webkit-scrollbar {
    width: 2px;
    background-color: #F5F5F5;

    &:hover {
      width: 4px;
    }
  }

answered Oct 05 '16 at 16:57

Ben Taliadoros

7,003
15
60
97

How to add a additional hover effect to scroll-bar

2 Answers2