CSS3 example code to realize the beautification effect of scroll bar

Time:2021-11-27

The specific code is as follows:

/*Width of scroll bar*/

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

/*Outer orbit. You can use display: none to make it not displayed, or you can add background pictures and change the display effect by color*/

    ::-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 with scroll bar moving up*/

    ::-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 relationship between the regions governed by the above CSS code: the above code interpretation

:: – the overall part of the WebKit scrollbar. The 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 make it not displayed, or you can add background pictures and change the display effect.
:: – WebKit scrollbar track outer orbit. You can use display: none to make it not displayed, or you can add background pictures and change the display effect.
:: – WebKit scrollbar track piece inner track, middle part of scroll bar (removed).
:: – the part of the WebKit scrollbar thumb that can be dragged
: – WebKit scrollbar 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 CSS3 to realize the effect of scroll bar beautification. For more information about CSS3 scroll bar beautification, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!