必须修改用户级styles.css:添加.monaco-scrollable-element .scrollbar.vertical { width: 12px !important; }等规则,完全退出并重启vscode生效,该css同时加宽左侧文件树和编辑器右侧垂直滚动条。

文件树滚动卡顿不是设置问题,而是滚动条太细导致操作不精准,进而触发频繁重绘和跳变——必须改 CSS 才能解决。
为什么文件树滚动总点不中、拖不动
VSCode 左侧文件树(资源管理器)用的是 Electron 原生滚动条,Windows/macOS 默认宽度仅 6px,在高 DPI 屏或触控板上基本靠“猜”定位。它不响应 workbench.scrollbarSize(该配置已在 1.80 版本移除),也无视鼠标系统级滚动设置。
- 点不中 → 拖动失败 → VSCode 误判为“点击折叠/展开”,触发节点刷新和 DOM 重排
- 拖动断续 → 滚动事件丢失 → 渲染层 fallback 到跳变滚动,视觉卡顿
- 即使开了
list.smoothScrolling,滚动条本身不可控,动画也无从谈起
怎么用 CSS 加宽文件树滚动条
唯一可靠方式是修改用户级 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 - 在文件中添加以下两行(
!important不可省略):.monaco-scrollable-element .scrollbar.vertical { width: 12px !important; }<br>.monaco-scrollable-element .scrollbar.vertical .slider { border-radius: 6px !important; } - 保存后,**必须完全退出 VSCode**(右键任务栏图标 → “退出”,不能只关窗口),再重开才生效
建议值范围:8px~14px;低于 8px 仍难操作,高于 14px 可能挤压右侧断点区或遮挡 One Dark Pro 等主题的侧边栏按钮。
编辑器区域滚动条要不要一起调
不用单独处理——上面那段 CSS 同时作用于两个地方:左侧文件树 和 编辑器右侧垂直滚动条。VSCode 没提供独立选择器,强行拆分反而不稳定。
- 如果你只想要文件树变宽、编辑器保持原样,目前没有官方支持路径
- 横向滚动条(顶部标签栏)是另一套逻辑,用
workbench.editor.titleScrollbarSizing控制,设为"large"即可 - 别把
styles.css放进.vscode/或扩展目录,VSCode 完全不读
加宽之后还卡?检查 smoothScrolling 是否真生效
滚动条变宽只是第一步,要真正“顺”,还得确保 list.smoothScrolling 开启且无冲突:
- 在
settings.json中确认有且仅有一行:"list.smoothScrolling": true,不能被注释,也不能被工作区设置覆盖为false - macOS 用户需关闭系统级「惯性滚动」:系统设置 → 辅助功能 → 指针控制 → 触控板选项 → 关掉「滚动惯性」,否则和插值动画打架
- Logitech/Razer 鼠标驱动若开了「平滑滚动」,会劫持滚轮事件,VSCode 的
list.smoothScrolling直接失效——先关驱动层平滑
注意:PageUp/PageDown 和方向键永远不走平滑管线,这是设计如此;想获得带动画的跳转,用 Ctrl+G 输入行号更可靠。











