Original text “browser scroll bar hover coarser, change color” reprinted from dao zhao.com

Today, at the request of UED, the scroll bar of the project is beautified. The native scroll bar is very useful, but it is really not beautiful.After using some CSS beautification

::-webkit-scrollbar{ height: 9px; width: 9px; } ::-webkit-scrollbar-thumb { border-radius: 10px; Background: rgba(157, 165, 183, 0.4); }Copy the code

So much better

One problem we found was that it was sometimes difficult to drag the scrollbar with the mouse as the scrollbar became thinner.

I stumbled across that the scroll bar is actually made up of a border and a background color

So we have the idea, set the border of the scroll bar to transparent, only when the mouse hover to set the border background color of the scroll bar

Searching for solutions on the Internet, I came across this article in which the scroll bar levitates to change the color size mentioned inside

Background-clip: padding-box background-clip: padding-box Background-clip: padding-box Background-clip: padding-box Background-clip: padding-box Background-clip: padding-box

We refer to the following changes

The complete code
::-webkit-scrollbar{ height: 9px; width: 9px; } ::-webkit-scrollbar-thumb { border-radius: 10px; border-style: dashed; border-color: transparent; border-width: 2px; Background: rgba(157, 165, 183, 0.4); background-clip: padding-box; } :-webkit-scrollbar-thumb:hover {background: rgba(157, 165, 183, 0.7); }Copy the code
Results the following

Mouse not hover

When the mouse hover