如何自定义网页滚动条的颜色和样式？
创始人
2025-02-16 02:32:09
0次
``css，/* 滚动条宽度 */，::-webkit-scrollbar {， width: 10px;，}，，/* 滚动条轨道 */，::-webkit-scrollbar-track {， background: #f1f1f1;，}，，/* 滚动条滑块 */，::-webkit-scrollbar-thumb {， background: #888;，}，，/* 滚动条滑块悬停 */，::-webkit-scrollbar-thumb:hover {， background: #555;，}，``

CSS 滚动条换色调整代码

如何自定义网页滚动条的颜色和样式？

CSS 提供了一种方式来自定义网页中的滚动条样式，以下是一个简单的示例，展示如何更改滚动条的颜色和宽度。

步骤1：设置滚动条的宽度

我们需要设置滚动条的宽度，这可以通过::-webkit-scrollbar 伪元素来实现。

 /* 设置滚动条宽度 */ ::-webkit-scrollbar {     width: 10px; /* 滚动条宽度 */ }

步骤2：设置滚动条轨道的颜色

我们可以设置滚动条轨道的颜色，轨道是滚动条的背景部分。

 /* 设置滚动条轨道颜色 */ ::-webkit-scrollbar-track {     background-color: #f5f5f5; /* 轨道背景颜色 */ }

步骤3：设置滚动条滑块的颜色

如何自定义网页滚动条的颜色和样式？

我们需要设置滚动条滑块的颜色，滑块是滚动条上可以拖动的部分。

 /* 设置滚动条滑块颜色 */ ::-webkit-scrollbar-thumb {     background-color: #888; /* 滑块背景颜色 */ }

将以上三个代码段合并到一个 CSS 文件中，或者直接添加到 HTML 文件的