How to add an additional hover effect to the scrollbar

Question

In my css I changed the scrollbar style 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 it also works when I add webkit animation to it, why it doesn't work. After adding the webkit animation, it looks like this:

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

Animation does not play. What for? I use google chrome. And you can also see @keyframe animation @keyframe :

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

Tell us how to make an animation. Special thanks to.

Answer 1

As I see, there are several reasons why this does not work.

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

You cannot change the width of body::-webkit-scrollbar to :hover . With or without 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 the scroll 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 } 

Answer 2

This will change the width, unfortunately transitions are still not supported. (It's in a sasuke)

  ::-webkit-scrollbar { width: 2px; background-color: #F5F5F5; &:hover { width: 4px; } }