Example code for css3 to achieve scroll bar beautification effect

The specific code is as follows:

/*Scroll bar width*/

    ::-webkit-scrollbar {
        width:9px;
        height:9px;
    }

/* Outer track. You can use display:none to hide it, or add a background image to change the color of the display*/

    ::-webkit-scrollbar-track {
        width: 6px;
        background-color:#0d1b20;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }

/*Scroll bar settings*/

    ::-webkit-scrollbar-thumb {
        background-color:#606d71;
        background-clip:padding-box;
        min-height:28px;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }
/*Background where the scroll bar moves to*/

    ::-webkit-scrollbar-thumb:hover {
         background-color:#fff;
    }

CSS

::-webkit-scrollbar { }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb { }
::-webkit-scrollbar-corner { }
::-webkit-resizer { }

The area relationship governed by the above CSS code is:

::-webkit-scrollbar The entire scrollbar, its attributes include width, height, background, border (just like a block-level element), etc.
::-webkit-scrollbar-button Buttons at both ends of the scroll bar. You can use display:none to hide it, or add a background image or color to change the display effect.
::-webkit-scrollbar-track Outer track. You can use display:none to hide it, or add a background image or color to change the display effect.
::-webkit-scrollbar-track-piece Inner track, the middle part of the scrollbar (removed).
::-webkit-scrollbar-thumb The draggable part of the scrollbar
::-webkit-scrollbar-corner corner
::-webkit-resizer defines the style of the drag block in the lower right corner

This is the end of this article about the example code of using CSS3 to achieve scroll bar beautification effect. For more relevant CSS3 scroll bar beautification content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!