设置滚动条样式

一、滚动条 —— chrome

::-webkit-scrollbar —— 滚动条总占位的 宽、高、背景色(白)、border，无hover

::-webkit-scrollbar-track —— 轨道，背景色(红，图，display:none)、内阴影、圆角，有:hover

::-webkit-scrollbar-thumb —— 滑块，背景色（黑）、内阴影、圆角，有:hover；（滑块也可以分别设置，纵向滑块 —— ::-webkit-scrollbar-thumb:vertical，横向滑块 —— ::-webkit-scrollbar-thumb:horizontal）

::-webkit-scrollbar-button —— 两端按钮(两端的三角形按钮)，默认display: none;(红，图)，有:hover

::-webkit-scrollbar-corner —— 右下角汇合处样式，默认display: none;(白，图)

::-webkit-resizer ：两个滚动条交汇处用于拖动调整元素大小的小控件 —— x

::-webkit-scrollbar-track-piece ：轨道，会覆盖2轨道（图，色，display: none） —— x

// ::-webkit-scrollbar —— 滚动条总占位的 宽(垂直方向)、高(水平方向)、背景色
::-webkit-scrollbar {
    width: 10px; /*对垂直流动条有效*/
    height: 10px; /*对水平流动条有效*/
    background-color:  rgba(255,255,255,.6); // 滚动条背景色
}
 
// ::-webkit-scrollbar-track —— 轨道的 颜色、内阴影、圆角
::-webkit-scrollbar-track{
    border-radius: 50px; // 圆角
    background-color: red; // 背景色
    box-shadow: inset 0 2px 6px rgba(0,0,0,.9); // 内阴影
    // -webkit-box-shadow: inset 0 2px 6px rgba(0,0,0,.9); // 内阴影
}
 
// ::-webkit-scrollbar-thumb —— 滑块的 颜色、内阴影、圆角
::-webkit-scrollbar-thumb{
    border-radius: 20px; // 圆角
    background-color: black; // 背景色
    box-shadow: inset 0 0 6px rgba(255,255,255,.6); // 内阴影
    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); // 内阴影
}
 
// ::-webkit-scrollbar-button —— 两端按钮样式，默认display: none;
::-webkit-scrollbar-button {
    background-color:red;
    // display: none;
}
 
// ::-webkit-scrollbar-corner —— 右下角汇合处样式，默认display: none;
::-webkit-scrollbar-corner {
    background: rgba(255,255,255,.6);
    // display: none;
}

二、滚动条 —— IE

1. scrollbar-arrow-color: #fff; —— 三角箭头的颜色

2. scrollbar-face-color: #0099dd; —— 滚动条滑块按钮的颜色

3. scrollbar-highlight-color: #0099dd; —— 滚动条整体颜色

4. scrollbar-shadow-color: #0099dd; —— 滚动条阴影

5. scrollbar-track-color: #0066ff; —— 滚动条轨道颜色

6. scrollbar-3dlight-color:#0099dd; —— 滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色

7. scrollbar-darkshadow-color: #0099dd; —— 滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色

8. scrollbar-base-color: #0099dd; —— 滚动条基准颜色

三、滚动条 —— Firefox

/* 设置全局属性 */
div{
    /* scrollbar-color: 滑块颜色 轨道颜色; */
    scrollbar-color: rgba(131, 124, 124, 0.9)  rgba(255,255,255,.6);
 
    /* 滚动条宽度有三种：thin、auto、none */
    scrollbar-width: thin; 
}