1.更改滚动条样式
/* 滚动条有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
background-color: #000000;
border-radius: 0;
}
/* 整个滚动条 */
::-webkit-scrollbar {
width: 4px;
height: 4px;
display: block;
}
/* 滚动条竖向滑块 */
::-webkit-scrollbar-thumb:vertical {
background-color: rgba(211,211,211,1.000);
border-radius: 2px;
}
/* 滚动条竖向滑块hover */
::-webkit-scrollbar-thumb:vertical:hover {
background-color: rgba(128,128,128,1.000);
border-radius: 4px;
}
/* 滚动条横向滑块 */
::-webkit-scrollbar-thumb:horizontal {
background-color: rgba(211,211,211,1.000);
border-radius: 2px;
}
/* 滚动条横向滑块hover */
::-webkit-scrollbar-thumb:horizontal:hover {
background-color: rgba(128,128,128,1.000);
border-radius: 4px;
}
/* 同时有垂直和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
display: block; /* 修复交汇时出现的白块 */
}
2.更改完成后的样子
-
1.鼠标未放上去的时候
-
2.鼠标放上去的时候