用Css3对滚动条进行一点点美化~

废话不多说，直接上干货吧，主要是下面几个属性

1:-webkit-scrollbar

//必须项
作用：控制滚动条的宽度
::-webkit-scrollbar {
    width: 10px;
    // height: 10px; 
    // 高度写不写，都不影响，因为会根据内容的长度自动计算
}

2: -webkit-scrollbar

//必须项
作用：控制滚动条滑块的颜色、圆角、内阴影等

::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}

::-webkit-scrollbar-thumb {
    background: #ccc; // 滑块颜色
    border-radius: 5px; // 滑块圆角
}

::-webkit-scrollbar-thumb:hover {
    background: #f40; // 鼠标移入滑块变红
}


默认不显示滚动条的轨道
非必须项
作用：控制滚动条的轨道的圆角、内阴影等
::-webkit-scrollbar-track {
    border-radius: 10px; // 轨道圆角
    background-color: #1890ff // 轨道颜色 
}

总结

::-webkit-scrollbar    //滚动条整体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   ///定义右下角拖动块的样式