CSS scroll bar beautification and compatibility

The following video has a long playlist, using overflow: auto; The default style scroll bar is displayed, which is actually pretty good

But the product wanted to optimize it to do this

How to do? Well, then tune it up. Bring out the fucking Italian cannon. No, bring out the famous. – Webkit

webkit

This list box has a class on it. List-box

-webkit-scrollbar

• Item must be
• Function: Controls the width of the scroll bar

.list-box::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // The length of the content is automatically calculated according to the length of the content.Copy the code

-webkit-scrollbar-thumb

• Item must be
• Function: Control the slider slider color, rounded corner, inner shadow, etc

.list-box::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // The length of the content is automatically calculated according to the length of the content..list-box::-webkit-scrollbar-thumb {
    background: #ccc; // Slider colorborder-radius: 5px; // Slider fillet}.list-box::-webkit-scrollbar-thumb:hover {
    background: #f40; // Mouse over the slider becomes red}Copy the code

-webkit-scrollbar-track

Scroll bar tracks are not displayed by default

• The item must be
• Function: Control the fillet and inner shadow of the scroll bar track

.list-box::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // The length of the content is automatically calculated according to the length of the content..list-box::-webkit-scrollbar-thumb {
    background: #ccc; // Slider colorborder-radius: 5px; // Slider fillet}.list-box::-webkit-scrollbar-thumb:hover {
    background: #f40; // Mouse over the slider becomes red}.list-box::-webkit-scrollbar-track {
    border-radius: 10px; // Orbit roundedbackground-color: #1890ff// Track color}Copy the code

Firefox

scrollbar-width

scrollbar-color

IE

scrollbar-base-color

scrollbar-track-color

scrollbar-arrow-color

scrollbar-3dlight-color

scrollbar-shadow-color

scrollbar-highlight-color

Global scrollbar style beautification

The project typically has a less file that sets global styles

// common.less
*::-webkit-scrollbar {
    width: 10px;
    // height: 10px; } *::-webkit-scrollbar-thumb {background: webkit-scrollbar-thumb {background: webkit-scrollbar-thumb;#ccc; // Slider colorborder-radius: 5px; // Compatible with Firefox, IE * {scrollbar-width: 10px;
    scrollbar-base-color: green;
    scrollbar-track-color: red;
    scrollbar-arrow-color: blue;
}
Copy the code