CSS设置Scrollbar样式

发表于 分类于 阅读次数： Changyan： 本文字数： 2.4k 阅读时长 ≈ 2 分钟
在前端开发中，有时候我们需要对页面的滚动条样式进行设置，以达到更好的视觉效果和用户体验。而CSS提供了多种方式来设置scrollbar样式，本文将详细介绍这些方式的使用方法和细节内容。

在前端开发中，有时候我们需要对页面的滚动条样式进行设置，以达到更好的视觉效果和用户体验。而CSS提供了多种方式来设置scrollbar样式，本文将详细介绍这些方式的使用方法和细节内容。

使用::-webkit-scrollbar来设置滚动条的样式

::-webkit-scrollbar选择器，用于设置浏览器的滚动条样式。使用该选择器，我们可以设置滚动条的宽度、颜色、背景等样式。

1
2
3
4
::-webkit-scrollbar {
    width: 10px;
    background-color: #f1f1f1;
}

上述代码设置了滚动条的宽度为10px，背景颜色为#f1f1f1。

使用::-webkit-scrollbar-thumb来设置滑块的样式

::-webkit-scrollbar-thumb选择器，用于设置滑块的样式。使用该选择器，我们可以设置滑块的颜色、背景、边框等样式。

1
2
3
4
::-webkit-scrollbar-thumb {
    background-color: #8cb3d9;
    border-radius: 5px;
}

上述代码设置了滑块的背景颜色为#8cb3d9，边框圆角为5px。

使用::-webkit-scrollbar-track来设置轨道的样式

::-webkit-scrollbar-track选择器，用于设置轨道的样式。使用该选择器，我们可以设置轨道的颜色、背景、边框等样式。

1
2
3
4
5
6
7
8
9
/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 设置滚动条轨道的hover样式 */
::-webkit-scrollbar-track:hover {
  background-color: #ccc;
}

上述代码设置了轨道的背景颜色为#f1f1f1，鼠标悬浮时的背景颜色为#ccc。

使用::-webkit-scrollbar-corner来设置滚动条的角的样式

::-webkit-scrollbar-corner选择器，用于设置滚动条的角的样式。使用该选择器，我们可以设置滚动条角的的颜色、背景、边框等样式。

1
2
3
::-webkit-scrollbar-corner {
    background-color: #f1f1f1;
}

使用自定义的CSS类来设置滚动条样式（局部元素滚动条样式）

除上述全局设置方法，我们还可以使用自定义的CSS类来设置局部元素滚动条样式。首先，我们需要为滑块和滚动条分别设置一个自定义类，然后在CSS中使用这些类来设置样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
.scrollbar {
    overflow: scroll;
}

.scrollbar::-webkit-scrollbar {
    width: 10px;
    background-color: #f1f1f1;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #8cb3d9;
    border-radius: 5px;
}

使用场景

隐藏滚动条

1
2
3
4
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

滚动条悬浮时显示

1
2
3
4
5
6
7
8
/* 滚动条悬浮时显示 */
::-webkit-scrollbar {
  display: none;
}
/* 滚动条悬浮时显示 */
.selector:hover::-webkit-scrollbar {
  display: block;
}

设置滚动条的样式

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
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 10px;
  background-color: #f1f1f1;
}
/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
/* 设置滚动条轨道的hover样式 */
::-webkit-scrollbar-track:hover {
  background-color: #ccc;
}
/* 设置滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #8cb3d9;
  border-radius: 5px;
}
/* 设置滑块的hover样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #5c8eb9;
}
/* 设置滚动条的角的样式 */
::-webkit-scrollbar-corner {
  background-color: #f1f1f1;
}

上述代码首先设置了一个名为scrollbar的类，然后使用::-webkit-scrollbar和::-webkit-scrollbar-thumb选择器分别为滑块和滚动条设置了样式。在页面中使用该类即可实现滚动条的样式设置。

总结

通过以上方式，我们可以设置滚动条的样式，以达到更好的视觉效果和用户体验。在实际使用中，我们可以根据需求选择合适的方式来设置滚动条样式。

需要注意的是，不同浏览器对::-webkit-scrollbar的支持并不完全一致，因此，在使用时需要做好兼容性测试，并根据实际需求进行调整。

本文永久链接: https://www.mulianju.com/scrollbar-style/