css鼠标移动上去才显示滚动条_css 滚动条 鼠标hover才有

当鼠标移动上去才显示滚动条，用css就可以完成

.list {
   /*默认显示滚动条，设置为白色看不出来*/
    overflow: scroll;
    height: 500px;
 }
.list::-webkit-scrollbar {
    width: 10px;
    background-color: #fff;
}

.list:hover ::-webkit-scrollbar-track-piece {
   /*鼠标移动上去再显示滚动条*/
    background-color: #fff;
    /* 滚动条的背景颜色 */
    border-radius: 6px;
    /* 滚动条的圆角宽度 */
}

.list:hover::-webkit-scrollbar-thumb:hover {
    background-color: #c0cecc;
}

.list:hover::-webkit-scrollbar-thumb:vertical {
    background-color: #c0cedc;
    border-radius: 6px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30