改变scrollbar的伪元素

::-webkit-scrollbar { /* 1 */ }

::-webkit-scrollbar-button { /* 2 */ }

::-webkit-scrollbar-track { /* 3 */ }

::-webkit-scrollbar-track-piece { /* 4 */ }

::-webkit-scrollbar-thumb { /* 5 */ }

::-webkit-scrollbar-corner { /* 6 */ }

::-webkit-resizer { /* 7 */ }

demo1

::-webkit-scrollbar {
       width: 12px;}::-webkit-scrollbar-track {
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);     border-radius: 10px;}::-webkit-scrollbar-thumb {
       border-radius: 10px;    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

demo2

/* For the "inset" look only */html {
       overflow: auto;}body {
       position: absolute;    top: 20px;    left: 20px;    bottom: 20px;    right: 20px;    padding: 30px;     overflow-y: scroll;    overflow-x: hidden;}/* Let's get this party started */::-webkit-scrollbar {
       width: 12px;} /* Track */::-webkit-scrollbar-track {
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);     -webkit-border-radius: 10px;    border-radius: 10px;} /* Handle */::-webkit-scrollbar-thumb {
       -webkit-border-radius: 10px;    border-radius: 10px;    background: rgba(255,0,0,0.8);     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }::-webkit-scrollbar-thumb:window-inactive {
       background: rgba(255,0,0,0.4); }

 

出处: https://css-tricks.com/custom-scrollbars-in-webkit/