修改滚动条样式

伪类

 //滚动条样式的修改是通过伪元素实现的：
 
    -webkit-scrollbar 滚动条整体部分
    -webkit-scrollbar-button 滚动条两端的按钮
    -webkit-scrollbar-track 外层轨道
    -webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
    -webkit-scrollbar-thumb 内嵌滑块
    -webkit-scrollbar-corner 边角
    -webkit-resizer 定义右下角拖动块的样式

例子

.box-1 {
    width: 50%;
    height: 200px;
    overflow-y: scroll;
    .inner-box {
        width: 100%;
        height: 1000px;
        background-image: linear-gradient(to bottom, red , yellow);
    }
    &::-webkit-scrollbar {
        width: 6px;
    }
    &::-webkit-scrollbar-thumb {
        width: 6px;
        background-color: #cfcfcf;
        border-radius: 3px;
    }
}