Detailed CSS3 custom scrollbar style notation

This article we mainly share with you CSS3 custom scroll bar style writing, the first simple introduction of the various properties, the article will show you four kinds of effects. Hope to help everyone.

1. ::-webkit-scrollbar: The whole part of the scroll bar, where the properties are Width,height,background,border and so on.

2. ::-webkit-scrollbar-button: Buttons at both ends of the scrollbar. You can use Display:none to let it not display, you can also add a background image, color change the display effect.

3. ::-webkit-scrollbar-track: Outer track. You can use Display:none to let it not display, you can also add a background image, color change the display effect.

4. ::-webkit-scrollbar-track-piece: Inner track, specific differences look at the gif below, it is important to note that it overrides the style of the third property.

5. ::-webkit-scrollbar-thumb: The part of the scroll bar that can be dragged

6. ::-webkit-scrollbar-corner: Corner, two scroll bars at intersection

7. ::-webkit-resizer: Two scroll bars at the intersection for dragging small controls that resize elements (basic not used)

Here's a look at a few sets of comparisons

Effect One

The CSS code for the scrollbar effect is as follows, the default is the original code, and the subsequent modifications are modified on this basis

/*css the main part of the style *//* define the width of the scrollbar and the background, the width and height of the scroll bar corresponding to the size */        ::-webkit-scrollbar {            width:10px;/* for vertical flow bar */            Height: 10px; /* Valid for horizontal flow bar        *        /}/* Define the track color, inner shadow, and fillet of the scrollbar */        :-webkit-scrollbar-track{            -webkit-box-shadow:inset 0 0 6px RGBA (0,0,0,.3);            Background-color:rosybrown;            border-radius:3px;        }       /* Define slider color, inner shadow and fillet */        ::-webkit-scrollbar-thumb{            border-radius:7px;            -webkit-box-shadow:inset 0 0 6px Rgba (0,0,0,.3);            Background-color: #E8E8E8;        }        /* Define styles for both buttons *        /::-webkit-scrollbar-button {            Background-color:cyan;        }        /* Define the style at the lower-right corner of the junction *       /::-webkit-scrollbar-corner {            Background:khaki;        }

Effect Two

Add the following code to the original code above

        ::-webkit-scrollbar-track-piece {            background-color:darkred;        }

You can see the style of the previous::-webkit-scrollbar-track property

Effect three

Add the following code to the original code above

        ::-webkit-scrollbar-track-piece {            background-color:darkred;            Background-image:url (https://www.baidu.com/img/baidu_jgylogo3.gif);        }

Is it possible to understand the points of the inner and outer orbits mentioned above?

Effect Four

Change the original code's::-webkit-scrollbar-track property to

::-webkit-scrollbar-track{            -webkit-box-shadow:inset 0 0 6px Rgba (0,0,0,.3);            Background-image:url (https://www.baidu.com/img/baidu_jgylogo3.gif);            Background-color:rosybrown;            border-radius:3px;        }

We look at the above several cases and draw conclusions.