Change width of scrollbar on hovering over it

user_12899660 0
Viewed 1733

I am changing the css of scroll bar on hover, so whenever a user is over a scroll bar(not on div) the width of scroll should come to normal.

  width: 8px;
}
::-webkit-scrollbar:hover {
  width: 50px;
  background:rgb(204 204 204 / 1);
}

I have tried this, but seems not to be working.

webkit scrollbar css
1 Answers

Does this answer your question?

look at this question: Redraw issue when changing webkit-scrollbar width on hover

div {
    width: 300px;
    height: 300px;
    overflow-y: scroll;
    background-color: blue;
}

/* Custom Webkit Scrollbar */
/* http://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

::-webkit-scrollbar:hover {
    height: 40px;
    width: 40px;
}


::-webkit-scrollbar-thumb {
    background-color: red;
}
::-webkit-scrollbar-thumb:hover {
    background-color: blue;
}
div:hover::-webkit-scrollbar-corner {
    width: 40px;
    /*background-color: red !important;*/
}

::-webkit-scrollbar-track-piece {
    /*background-color: #efefef;*/
}

::-webkit-scrollbar-thumb:vertical {
    /*background-color: #666;*/
}
<div><img src="http://placehold.it/500x500" /></div>

user_136721650
Related