CODEWITHSUNDEEP
htmlcss
user4861400
user4861400

Reputation:

How to add a additional hover effect to scroll-bar

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.

Upvotes: 6

Views: 9035

Answers (2)

Ben Taliadoros
Ben Taliadoros

Reputation: 9521

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;
    }
  }

Upvotes: -2

pstenstrm
pstenstrm

Reputation: 6489

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
}

Upvotes: 6

Related Questions