0Pricing
CSS Academy · 课时

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

使用 WebKit 伪元素和 scrollbar-color 属性自定义滚动条外观。

使用 ::-webkit-scrollbar 设置滚动条样式 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

滚动条样式概览

不同操作系统中的浏览器会渲染外观各异的默认滚动条。CSS 可以使用非标准的 WebKit 伪元素和现代标准属性自定义滚动条外观。

::-webkit-scrollbar

整个滚动条的根伪元素。设置宽度（垂直方向）和高度（水平方向）：

  <div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

::-webkit-scrollbar-track

轨道是滑块沿其移动的背景通道：

  <div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

::-webkit-scrollbar-thumb

滑块是可拖动的滚动指示器：

  <div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

完整的自定义滚动条

完整的自定义滚动条实现：

  <div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

现代标准：scrollbar-color

scrollbar-color 是 Firefox 支持的标准化属性。它可以在一条声明中设置滑块和轨道的颜色：

  <div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

现代标准：scrollbar-width

scrollbar-width 使用关键字值控制滚动条大小：

  <div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

跨浏览器滚动条样式

如需完整的跨浏览器支持，请同时使用这两种方法：

  <div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

隐藏滚动条但保留滚动功能

让元素可滚动，同时在视觉上隐藏滚动条：

  <div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

深色模式滚动条

使用 CSS 的 color-scheme 属性，无需自定义样式即可获得操作系统原生的深色滚动条：

  <p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>

可访问性提醒

不要将滚动条设置得过小或以难以发现的方式隐藏，以免用户难以找到滚动功能。对于触控优先的设计，隐藏滚动条是可以接受的，但在桌面设备上可能会令人困惑。

快速检查

哪个标准化 CSS 属性可以设置滚动条颜色，并且受到 Firefox 支持？

回顾

使用 ::-webkit-scrollbar 伪元素（WebKit）以及标准的 scrollbar-color/scrollbar-width 属性（Firefox/现代浏览器）来自定义滚动条。为了获得完整的跨浏览器支持，请同时使用两种方法。使用 scrollbar-width: none 加上对应的 WebKit 方法，在保留滚动功能的同时隐藏滚动条。

常见问题解答

「使用 ::-webkit-scrollbar 设置滚动条样式」课时是免费的吗？

是的 — 「使用 ::-webkit-scrollbar 设置滚动条样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「使用 ::-webkit-scrollbar 设置滚动条样式」这节课中我会学到什么？

使用 WebKit 伪元素和 scrollbar-color 属性自定义滚动条外观。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「使用 ::-webkit-scrollbar 设置滚动条样式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. overflow：hidden、scroll、auto、clip
  2. scroll-behavior：smooth
  3. scroll-snap-type 与 scroll-snap-align
  4. 使用 ::-webkit-scrollbar 设置滚动条样式
← 返回 CSS Academy