答案：通过安装Custom CSS and JS Loader扩展并启用unsafe code loading，可注入自定义CSS修改VSCode滚动条样式。具体步骤包括编写::-webkit-scrollbar系列伪元素规则，保存为本地文件后在扩展中指定路径，最后运行“Apply Custom Styles”命令重启VSCode应用样式，但需注意安全风险与兼容性问题。
VSCode 默认使用系统原生滚动条，样式受限于操作系统，无法直接通过用户 CSS 修改。但借助 CSS 注入 技术（需扩展支持），可以突破限制，自定义滚动条外观。
启用 CSS 注入的前提条件
VSCode 本身不开放全局 CSS 自定义入口，需依赖第三方扩展实现注入能力：
- 安装 Custom CSS and JS Loader 扩展（如：“Custom CSS” by iocave）
- 该扩展允许加载本地 CSS 文件，并将其注入到 VSCode 渲染进程中
- 首次使用需按扩展指引修改 VSCode 启动配置，启用 unsafe code loading（警告：存在安全风险）
编写自定义滚动条样式
在启用注入后，可通过 CSS 的 ::-webkit-scrollbar 系列伪元素定制滚动条。适用于 WebKit 内核（Electron 底层支持）：
- ::-webkit-scrollbar：主滚动条容器
- ::-webkit-scrollbar-thumb：可拖动的滑块部分
- ::-webkit-scrollbar-track：滑道背景
- ::-webkit-scrollbar-corner：横向与竖向滚动条交汇处
示例代码：
立即学习“前端免费学习笔记（深入）”；
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: #6c757d;
border-radius: 6px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
::-webkit-scrollbar-corner {
background-color: #e0e0e0;
}
将上述 CSS 保存为本地文件（如 custom-scroll.css），并在扩展配置中指定路径。
应用并重启 VSCode
配置完成后，按扩展说明执行以下步骤：
- 运行扩展提供的 “Apply Custom Styles” 命令
- VSCode 会重启并加载你的 CSS 文件
- 若无异常，编辑器内所有支持 WebKit 滚动条的区域（如侧边栏、编辑区、终端）均会应用新样式
注意：更新 VSCode 或扩展后可能需重新应用样式。
基本上就这些。CSS 注入虽能深度定制界面，但依赖非官方手段，稳定性与兼容性需自行权衡。
