VSCode 1.85+ 可直接设 workbench.scrollbarSize 为16或18加宽编辑器垂直滚动条,仅作用于代码区,无需重启;旧版不支持该配置,需用 CSS 方式修改。

直接改 scrollbarSize 就能加宽滚动条,但得看 VSCode 版本
VSCode 1.85+ 原生支持 scrollbarSize 配置项,它只影响编辑器主区域(不包括侧边栏、终端、面板)的垂直滚动条宽度,默认值是 12。设为 16 或 18 后点击更准,尤其在触控板或高缩放比(如 150%)下明显改善。
常见错误:在旧版 VSCode(scrollbarSize 完全无效——那个配置早在 1.80 就被移除了,现在设了也静默忽略。如果你用的是 1.84 或更早,必须走 CSS 路径。
- 打开设置(
Ctrl+,或Cmd+,),搜scrollbarSize - 点「Edit in settings.json」,添加:
"scrollbarSize": 18
- 保存即生效,无需重启
scrollbarSlider.background 控制滑块颜色,别拼错键名
滚动条滑块颜色由 scrollbarSlider.background 决定,它只改滑块本体,不影响轨道、边框或缩略图。这个值必须写在 workbench.colorCustomizations 里,且颜色格式只能是合法十六进制(如 #5a6b8c)、rgba()(如 rgba(57, 197, 187, 0.7)),不支持 CSS 变量或主题内置色引用。
最常踩的坑:scrollbar.background、scrollbarSlider.color、scrollbar.sliderBackground 这些全是错的,VSCode 直接忽略,改了也没反应。
- 在
settings.json中添加完整结构:"workbench.colorCustomizations": { "scrollbarSlider.background": "#33333340" } -
#33333340的后两位40是 alpha 透明度(约 25% 不透明),比纯黑更柔和 - 改完保存,macOS 下若启用了「自动隐藏滚动条」,需手动拖一下才能看到效果
CSS 方式仍可用,但路径和 !important 缺一不可
如果你用的是 VSCode scrollbarSize 没生效(比如工作区设置覆盖了用户设置),就得回退到自定义 CSS。核心规则是:.monaco-scrollable-element .scrollbar.vertical { width: 14px !important; },必须加 !important,否则被 VSCode 内部样式压住。
styles.css 放错位置是“没反应”的主因。它必须放在用户级目录下,不是工作区也不是扩展目录:
- Windows:
%USERPROFILE%\AppData\Roaming\Code\User\styles.css - macOS:
$HOME/Library/Application Support/Code/User/styles.css - Linux:
$HOME/.config/Code/User/styles.css
改完必须完全退出 VSCode(不是关窗口),再重开才生效。宽度过大(如 >16px)可能挤压右侧最后一列字符,尤其在窄屏或高缩放下,建议控制在 12–14px 之间。
别碰 scrollbarSlider.hoverBackground 和 scrollbarSlider.activeBackground
这两个值理论上控制悬停和拖拽时的滑块颜色,但实际几乎无法稳定生效。第三方主题(如 One Dark Pro、SynthWave '84)会主动覆盖它们;macOS 开启「自动隐藏滚动条」后,hover/active 状态根本不会触发;即使生效,视觉差异太小(比如 #333333 和 #222222),肉眼难分辨。
与其花时间调这两个,不如优先确保 scrollbarSlider.background 带合理 alpha 值(如 #33333340),让滑块本身足够清晰可辨。插件如 Custom CSS and JS Loader 已被官方禁用,强行启用会导致更新失败或安全警告,不值得冒险。


















