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.
8 Answers
I am using Visual Studio Code 1.58.2 on Windows 10 OS.
- Open the menu: File -> Preferences -> Settings.
- A Settings tab will be open. In the search box, type in title scrollbar sizing.
- Change the dropdown list value from default to large.
- Close Settings tab.
- 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.
Comments
@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; } */ 
2 Comments
armyofda12mnkeys
note: latest VSC above didnt work. specifically this part: .monaco-workbench>.part.editor didnt' work, needed a slight modification: .monaco-workbench .part.editor
ilias
@armyofda12mnkeys ,
.monaco-workbench .part.editor and removing all > still doesn't workAs of VS Code 1.48.0, the following line in settings.json helped me to make horizontal scrollbar larger:
"workbench.editor.titleScrollbarSizing": "large" 
Comments
You need to edit the file %APPDATA%\Code\User\settings.json and add
,"editor.scrollbar.verticalScrollbarSize": 15 ,"editor.scrollbar.horizontalScrollbarSize": 15 
1 Comment
svenema
And ignore the "Unknown Configuration Setting" that VS Code throws at you, it works regardless.
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.
1 Comment
Case Silva
Thank you! I don't know why this one isn't set to this size by default to match the others.
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.
1 Comment
Fenton
This worked for me, except in
*.ipynb files. I love having a giant grab handle, so if anyone knows how to make this all apply in notebooks, I'd be super-appreciative.You can also have the open tabs wrap and not scroll:
"workbench.editor.wrapTabs": true 
Comments
At least for editor scrollbars, there are the editor.scrollbar.verticalScrollbarSize and editor.scrollbar.horizontalScrollbarSize settings since v1.58.
There's also an open feature-request for general customization of vertical scrollbar width/size: Change Vertical Scrollbar Width #30191. I'd suggest that you give that issue ticket a thumbs up to show support for it. You can also subscribe to it to get notified about discussion and progress. Please avoid making noisy comments there like ones that just consist of "+1" / "bump". Also note that someone there found a way to modify the installation files to force the change locally until the next update installation (see this comment).
editor.scrollbar.verticalScrollbarSizesetting in vscode v1.58.