How to make scrollbars wider in Visual Studio Code?

Question

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.

Answer 1

@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;
}
*/

Answer 2

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

"workbench.editor.titleScrollbarSizing": "large"

Answer 3

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 easy to pick by the mouse pointer.

Answer 4

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

,"editor.scrollbar.verticalScrollbarSize": 15
,"editor.scrollbar.horizontalScrollbarSize": 15

Answer 5

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.

Answer 6

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.