系统滚动条样式优化

::-webkit-scrollbar 滚动条整体部分 
::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动(取决于是垂直还是水平) 
::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb) 
::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置 
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分(除去) 
::-webkit-scrollbar-corner 边角，及两个滚动条的交汇处 
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

样式一

  ::-webkit-scrollbar-track-piece {
        -webkit-border-radius: 0
    }
    ::-webkit-scrollbar {
        width: 5px;
        height: 10px
    }
    ::-webkit-scrollbar-thumb {
        height: 50px;
        background-color: #b8b8b8;
        -webkit-border-radius: 6px;
        outline-offset: -2px;
        filter: alpha(opacity = 50);
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5
    }
    ::-webkit-scrollbar-thumb:hover {
        height: 50px;
        background-color: #878987;
        -webkit-border-radius: 6px
    }

                                                           

样式二

 ::-webkit-scrollbar{width: 1px;height: 1px;background-color: #d9d9d9;}
    /*定义滚动条轨道 内阴影+圆角*/
 ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.8);border-radius: 1px;background-color: #d9d9d9;}
    /*定义滑块 内阴影+圆角*/
 ::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8);background-color: #666;}

 这两种就是极简风的滚动条，如果有希望更多样式的滚动条可以去这里看看

CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets.https://css-tricks.com/