[css3]スクロールバー美化効果を実現するcss3サンプルコード

/*width of scrollbar*/

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

/* Outer track. You can use display:none to make it not show, or you can add a background image and color to change the display effect*/

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

/*Scrollbar 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;
    }
/*Scrollbar move up background*/

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

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