27

Is there a way to make Visual Studio Code's window scrollbars wider? I'm finding they're a few pixels too skinny compared to other apps and my mouse often misses the precise location that I'm trying to click.

Gama11
  • 31,714
  • 9
  • 78
  • 100
Andr
  • 1,043
  • 4
  • 13
  • 15
  • 6
    You might want to watch this: https://github.com/Microsoft/vscode/issues/30191 – Dai Apr 30 '18 at 19:31
  • 4
    See https://stackoverflow.com/a/68233096/836330 for an update on `editor.scrollbar.verticalScrollbarSize` setting in vscode v1.58. – Mark Jul 03 '21 at 03:57

7 Answers7

22

I am using Visual Studio Code 1.58.2 on Windows 10 OS.

  1. Open the menu: File -> Preferences -> Settings.
  2. A Settings tab will be open. In the search box, type in title scrollbar sizing.
  3. Change the dropdown list value from default to large.
  4. Close Settings tab.
  5. DONE! Congratulations.

If you want to test it, open multiple files and you will see the horizontal scrollbar at the top is wider and easier to pick by the mouse pointer.

Kevy Granero
  • 643
  • 5
  • 17
16

@andr its only for vertical, the complete set

,"editor.scrollbar.verticalScrollbarSize": 10
,"editor.scrollbar.horizontal": "visible"
,"editor.scrollbar.horizontalScrollbarSize": 15

, and workaround using an exceptionally meaningful extension ,for tabs group scrollbar

(to insert in custom.css):

/*tab group scrollbar;*/
.monaco-workbench>.part.editor>.content .editor-group-container>.title.tabs>.tabs-and-actions-container>.monaco-scrollable-element .scrollbar,
.monaco-workbench>.part.editor>.content .editor-group-container>.title.tabs>.tabs-and-actions-container>.monaco-scrollable-element .scrollbar .slider {
    height: 20px !important;
}

/*scrollbars;
.monaco-workbench>.part.editor>.content .editor-group-container>.editor-container .monaco-scrollable-element .scrollbar
, .monaco-workbench>.part.editor>.content .editor-group-container>.editor-container .monaco-scrollable-element .scrollbar .slider {
    height: 20px !important;
}
*/
ilias
  • 313
  • 2
  • 10
  • note: latest VSC above didnt work. specifically this part: .monaco-workbench>.part.editor didnt' work, needed a slight modification: .monaco-workbench .part.editor – armyofda12mnkeys Jan 04 '20 at 18:57
  • @armyofda12mnkeys , `.monaco-workbench .part.editor` and removing all `>` still doesn't work – ilias Jan 04 '20 at 22:15
10

As of VS Code 1.48.0, the following line in settings.json helped me to make horizontal scrollbar larger:

"workbench.editor.titleScrollbarSizing": "large"
DenisG
  • 111
  • 1
  • 3
8

You need to edit the file %APPDATA%\Code\User\settings.json and add 

,"editor.scrollbar.verticalScrollbarSize": 15
,"editor.scrollbar.horizontalScrollbarSize": 15
Stefan Pintilie
  • 677
  • 8
  • 5
  • 1
    And ignore the "Unknown Configuration Setting" that VS Code throws at you, it works regardless. – svenema May 12 '21 at 19:01
4

Since VSCode's June 2021 release (version 1.58) the scrollbar can be edited directly in the settings (get there faster by pressing ctr+,) and searching for editor.scrollbar. You can change the vertical scrollbar's size there.

Release notese on scrollbar settings

dango_301
  • 61
  • 6
2

Thanks to Dai for the link. The undocumented property editor.scrollbar.verticalScrollbarSize handles this for the code windows. It doesn't affect the scrollbars on the file explorer, but that's OK for now.

Andr
  • 1,043
  • 4
  • 13
  • 15
1

You can also have the open tabs wrap and not scroll:

"workbench.editor.wrapTabs": true
NightOwl
  • 41
  • 3