css设置滚动条样式；滚动条设置透明_css透明滚动条

滚动条透明代码

.resizable-div {
  resize: both;
  /* 允许水平和垂直调整大小 */
  overflow: auto;
  /* 确保内容超出边界时出现滚动条 */
}
/* 滚动条整体样式 */
.resizable-div::-webkit-scrollbar {
  width: 4px; /* 竖直滚动条宽度 */
  height: 4px; /* 水平滚动条高度 */
}

/* 滚动条滑块 */
.resizable-div::-webkit-scrollbar-thumb {
  background: transparent; /* 设置滑块为完全透明 */
  border-radius: 4px; /* 圆角滑块 */
}
/* 滚动条滑块在悬停时的样式 */
.resizable-div::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.1); /* 在悬停时略微可见 */
}

/* 滚动条轨道（背景） */
.resizable-div::-webkit-scrollbar-track {
  background: transparent; /* 设置轨道为完全透明 */
}
::-webkit-scrollbar-track-piece {
  background-color: transparent; /* 设置轨道为完全透明 不设置不生效 */
}

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

设置滚动条颜色

.resizable-div {
  overflow: auto;
  /* 确保内容超出边界时出现滚动条 */
}
/* 滚动条整体样式 */
.resizable-div::-webkit-scrollbar {
  width: 4px; /* 竖直滚动条宽度 */
  height: 4px; /* 水平滚动条高度 */
}

/* 滚动条滑块 */
.resizable-div::-webkit-scrollbar-thumb {
  background: red; /* 设置滑块颜色 */
  border-radius: 4px; /* 圆角滑块 */
}
/* 滚动条滑块在悬停时的样式 */
.resizable-div::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.1); /* 在悬停时略微可见 */
}

/* 滚动条轨道（背景） */
.resizable-div::-webkit-scrollbar-track {
  background: greenyellow; /* 设置轨道颜色 */
}
::-webkit-scrollbar-track-piece {
  background-color: aqua; /* 设置轨道颜色 */
}
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