I am trying to recreate the scrollbar from Firefox into chrome and have been mostly successful in doing so.
But my success ends when trying to change the scrollbar-button.
I want the scrollbar button to be invisible, but become visible when hovering over the entire scrollbar, but I have no clue how to select the button from the track.
#projectView {
overflow-y: scroll;
}
#projectView::-webkit-scrollbar {
width: 12px;
background: rgba(0, 0, 0, 0);
border-radius: 10px;
}
#projectView::-webkit-scrollbar-button:vertical:decrement {
background-size: 18px;
background-position: center center;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgb(149, 149, 149)'><polygon points='16.210,16.000 7.790,16.000 6.200,15.000 6.460,12.790 10.670,7.690 13.330,7.690 17.540,12.790 17.800,15.000 16.210,16.000'/></svg>");
}
#projectView::-webkit-scrollbar-button:vertical:increment {
background-size: 18px;
background-position: center center;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='rgb(149, 149, 149)'><polygon points='12.000,17.000 10.670,16.360 6.460,11.260 6.200,9.050 7.790,8.000 16.210,8.000 17.800,9.050 17.540,11.260 13.330,16.360 12.000,17.000'/></svg>");
}
#projectView::-webkit-scrollbar-thumb {
background: rgb(149, 149, 149);
border-radius: 10px;
border: 5px solid transparent;
background-clip: content-box;
}
/* hover */
#projectView::-webkit-scrollbar:hover {
background: rgba(0, 0, 0, 0.3);
}
/* HOW DO I HOVER OVER THE SCROLLBAR TRACK AND SELECT THE SCROLLBAR BUTTON?!?!?!?!?!? */
#projectView::-webkit-scrollbar-track:hover > ::-webkit-scrollbar-button:vertical:increment {
/* random test image to prove it changes */
background-image: url('https://media.moddb.com/images/members/5/4550/4549205/duck.jpg');
}
#projectView::-webkit-scrollbar-thumb:hover {
border: 3px solid transparent;
}