css 元素设置滚动条overflow:auto的样式

1、首先说明滚动条样式是通过css的选择器来修改的，需要用到的选择器大概有下面几种：

• ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
• ::-webkit-scrollbar-button 滚动条两端的按钮
• ::-webkit-scrollbar-track 外层轨道
• ::-webkit-scrollbar-track-piece 内层滚动槽
• ::-webkit-scrollbar-thumb 滚动的滑块
• ::-webkit-scrollbar-corner 边角
• ::-webkit-resizer 定义右下角拖动块的样式

2、下面做设置示范，一般三个就够了，需要用到更多设置的就自己参照文档修改对应的属性吧（对了，不是所有css属性它都支持）

    .class-name {
      max-height: 580px;
      overflow-y: auto;
    }
    /*定义整体的宽度*/
    .class-name::-webkit-scrollbar {
      width: 3px;
    }
    /*定义滚动条轨道*/
    .class-name::-webkit-scrollbar-track {
      border-radius: 5px;
    }
    /*定义滑块*/
    .class-name::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: rgba(27, 140, 236, 0.5);
    }