1. The whole part of the scroll bar
use::-webkit-scrollbar
Example:
.container::-webkit-scrollbar {
width: 20px;//修改滚动条宽度
}
2. The slider in the scroll bar
use::-webkit-scrollbar-thumb
Example:
.container::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #666666;
}
//鼠标移入样式
.container::-webkit-scrollbar-thumb:hover {
background: #333333;
}
3. The outer track in the scroll bar
use::-webkit-scrollbar-track
Example:
.container::-webkit-scrollbar-track {
border-radius: 8px;
background: #eeeeee;
}
4. Arrow buttons at both ends of the scroll bar
use::-webkit-scrollbar-button
Example:
.container::-webkit-scrollbar-button {
background: #eeeeee;
}
5. The intersection of horizontal and vertical scroll bars
use::-webkit-scrollbar-corner
Example:
.container::-webkit-scrollbar-corner {
background-color: transparent;
}
6. Separately set the horizontal or vertical scroll bar style
Scrollbars in the horizontal direction: :horizontal
Scrollbars in the vertical direction::vertical
Example:
//水平方向滚动条
.container::-webkit-scrollbar:horizontal {
width: 10px;
}
//垂直方向滚动条
.container::-webkit-scrollbar:vertical {
width: 20px;
}