答案：通过CSS的::-webkit-scrollbar-track伪元素可设置滚动条轨道背景色，适用于Webkit内核浏览器。示例中定义了滚动条宽度、轨道背景色及滑块样式，并支持悬停效果；该方法在Chrome、Edge、Safari中有效，Firefox需借助JavaScript库实现兼容。
修改HTML滚动条轨道背景色主要通过CSS的伪元素来实现，尤其在Webkit内核浏览器（如Chrome、Edge、Safari）中支持较好。下面教你如何设置滚动条轨道的背景颜色。
使用Webkit伪元素自定义滚动条
Webkit浏览器提供了几个特殊的伪元素，可以用来样式化滚动条的各个部分：
- ::-webkit-scrollbar：整个滚动条的宽度
- ::-webkit-scrollbar-track：滚动条轨道（背景部分）
- ::-webkit-scrollbar-thumb：滑块（可拖动部分）
要修改轨道背景色，重点使用 ::-webkit-scrollbar-track。
示例代码：
立即学习“前端免费学习笔记（深入）”；
兼容性说明
CSS滚动条样式目前主要在基于WebKit/Blink的浏览器中生效，例如Chrome、Edge、Opera和Safari。Firefox和IE不支持这些伪元素。
如果你需要在Firefox中控制滚动条外观，目前只能通过JavaScript模拟或使用第三方库（如SimpleBar、OverlayScrollbars）。
实际应用场景
你可以在以下场景中使用：
- 美化网页侧边栏的长内容滚动区域
- 提升移动端或桌面端Web应用的视觉一致性
- 配合主题色调整滚动条配色，增强用户体验
基本上就这些。只要记住关键伪元素和它们的作用，就能轻松自定义滚动条轨道背景色。注意测试不同浏览器下的显示效果，确保不影响可用性。
