Vscode: Change Vertical Scrollbar Width

[cocowalla]

Is there any way to change the width of the vertical scrollbars in Visual Studio Code, especially the one for the left panel?

I find it so thin that it's a bit fiddly to use.

[alexdima]

I don't think we currently have any option to customize the width of the vertical scrollbars in the viewlets.

[cocowalla]

Is this an Electron limitation? Or do you mean that a means simply doesn't exist in VS Code yet?

[alexdima]

The scrollbars are all custom.

e.g. you can change the width of the scrollbars instances in the editor via a hidden option e.g. "editor.scrollbar.verticalScrollbarSize": 50 (requires a F1 > Reload window / VSCode restart to apply).

There is no such option (hidden or not) for the explorer.

[cocowalla]

@alexandrudima I get a squiggly line under "editor.scrollbar.verticalScrollbarSize" with a tooltip that says Unknown configuration setting - but it does indeed work, thanks!

The editor scrollbar was my biggest issue, but it would be nice to increase the size of the explorer scrollbar too - any chance of exposing this as a config option too?

[nicooprat]

It works indeed. Tried the same for the file explorer in the sidebar, but "explorer.scrollbar.verticalScrollbarSize": 5 doesn't work though. Any other hidden feature? :)

[jez9999]

This gets my vote as well. Many times now I have wanted that explorer scrollbar to be thicker. I am not on a mobile device!!

[disrupted]

does someone know how to get rid of this atrocious "Unknown configuration setting" warning?

[paterasMSFT]

Why was this closed? explorer.scrollbar.verticalScrollbarSize still doesn't work, and editor.scrollbar.verticalScrollbarSize still has an unknown setting warning (though it does work).

@aeschli, you reference #24755, which you've closed, saying an issue about scrollbar width should be opened. But you've also closed this issue, which is about scrollbar width. You even referencing this issue when you say an issue should be opened.

What was your intention?

[aeschli]

@paterasMSFT This issue is still open. #24755 was about to issues: color and width. For colors we added some new color ids. Width is covered by this issue.

[paterasMSFT]

Oh, sorry, I thought the Closed label after the reference to #24755 referred to you closing this issue.

[AndreSouzaAbreu]

Hello, everyone!

My case is a little bit different and I'm attaching a screen picture to show what I mean. Could you help with that?
I want to change the thickness of the horizontal scrollbar on the TOP. This scrollbar is the one that allows you to switch between files. I drew a green square to indicate the scrollbar I want to change.

By the way, following the instructions here, I put the code in the settings.json (as you can see inside the red square) and it changed the horizontal scrollbar on the bottom (which is indicated by a red arrow). I do NOT need this one.

How can I change the top scrollbar to make it thicker and always visible?

I hope I was clear. If not, please, let me know how I can improve my questions.

[VipSaran]

Nice discussion with some workarounds, but I'm missing the one for the tab scroll bar, unfortunately. Is there a (hidden) option to change/increase its height? Because it's tricky to grab it an not to unintentionally move one of the tabs.

Possibly it is handled via horizontalSliderSize?

[jeffrey-hui]

Nice discussion with some workarounds, but I'm missing the one for the tab scroll bar, unfortunately. Is there a (hidden) option to change/increase its height? Because it's tricky to grab it an not to unintentionally move one of the tabs.

Possibly it is handled via horizontalSliderSize?

I didn't notice a difference for the tab scroll bar when changing "editor.scrollbar.horizontalScrollbarSize", is there another setting to change the tab scroll bar only?

[ghost]

It works indeed. Tried the same for the file explorer in the sidebar, but "explorer.scrollbar.verticalScrollbarSize": 5 doesn't work though. Any other hidden feature? :)

Did anyone ever figure this out? Explorer sidebar is really bugging me since I have a tiny computer.

[musicdsign]

Hello, everyone!

My case is a little bit different and I'm attaching a screen picture to show what I mean. Could you help with that?
I want to change the thickness of the horizontal scrollbar on the TOP. This scrollbar is the one that allows you to switch between files. I drew a green square to indicate the scrollbar I want to change.

By the way, following the instructions here, I put the code in the settings.json (as you can see inside the red square) and it changed the horizontal scrollbar on the bottom (which is indicated by a red arrow). I do NOT need this one.

How can I change the top scrollbar to make it thicker and always visible?

I hope I was clear. If not, please, let me know how I can improve my questions.

Yes I am having the same issue. I try to scroll at the top but select a file instead because the scrollbar is not tall enough.

[AndreSouzaAbreu]

With the release of Vscode 1.44.1, we finally have the option to configure the thickness of the top scrollbar :D ! I'm so glad to share this with you all !

[rauschbit]

We've waited for this for a long time and I'm happy that there finally is an option for it and usually don't want to complain on that stuff - but why is there only the option "large" instead of giving the users the choice to set their own thickness like for many other sizing options?

[AndreSouzaAbreu]

We've waited for this for a long time and I'm happy that there finally is an option for it and usually don't want to complain on that stuff - but why is there only the option "large" instead of giving the users the choice to set their own thickness like for many other sizing options?

I'm sorry, but I don't know. I'm just sharing the information to make people aware of it. Well, at least we have a partial solution to the problem

[VipSaran]

Even though it's implemented, there's (at least one) bug for it already:
https://github.com/microsoft/vscode/issues/95413

Vote to give it exposure ;)

[kuhlaid]

What about changing the terminal window scrollbar? I tried
"terminal.scrollbar.verticalScrollbarSize": 50 with no luck. This scrollbar is painfully tiny.

[nathan-alden-sr]

To VS Code maintainers: Come on, folks, it should be very, very obvious that enumeration-based settings, or only providing a setting for _one_ visual element's scrollbar is _not_ what is being asked for here. I want the ability--and I suspect most people are the same--to customize _all_ scrollbars' widths/heights. For something so basic I am shocked this hasn't been implemented, especially considering how otherwise flexible VS Code is in almost every regard.

[kuhlaid]

The scrollbar width should probably follow the convention of web browsers (it does not scale with the content when using the View/Appearance/Zoom option). I doubt many users realize that their scrollbar width is actually shrinking when they intentionally or inadvertently scale down the window zoom level in VS Code.

[jez9999]

Both horizontal and vertical scrollbars in the code editor, as well as the vertical scrollbar in the Explorer, should have settings allowing the user to specify how thick they should be. Setting should be a number, not values like "small" and "large".

[gjsjohnmurray]

@jez9999 even now you can achieve this for the editor by using the 'hidden' settings and reloading/restarting, e.g.

    "editor.scrollbar.horizontalScrollbarSize": 40,
    "editor.scrollbar.verticalScrollbarSize": 50,

I agree they should become official, and there should be equivalent settings for elsewhere (e.g. Explorer).

[Kenobi-the-2nd]

I agree. The width adjustment for the explorer scroll bar would be incredibly helpful.

[ypapouin]

Yes indeed, I don't have a scrollwheel on my pen, and on a daily usage, it
is a pain to scroll the explorer without starting dragging a file/folder.

[viponedream]

scroll bar in explore still too thin. hard to drag.

[diegoshe]

Всем привет!

Мой случай немного отличается, и я прилагаю экранное изображение, чтобы показать, что я имею в виду. Не могли бы вы помочь с этим?
Я хочу изменить толщину горизонтальной полосы прокрутки на вершине. Эта полоса прокрутки позволяет переключаться между файлами. Я нарисовал зеленый квадрат, чтобы указать полосу прокрутки, которую я хочу изменить.

Кстати, следуя приведенным здесь инструкциям, я поместил код в файл settings.json (как вы можете видеть внутри красного квадрата), и он изменил горизонтальную полосу прокрутки внизу (которая обозначена красной стрелкой). Мне не нужен этот.

Как изменить верхнюю полосу прокрутки, чтобы она стала толще и всегда была видна?

Надеюсь, мне было ясно. Если нет, пожалуйста, дайте мне знать, как я могу улучшить свои вопросы.

Use
"workbench.editor.titleScrollbarSizing": "large",

[josehcif]

I am another VSCode user waiting for the explorer vertical scrollbar to be changed to wider setting. It is really annoying as is now, since you need to have superhuman precision to grab it.

[Christopher-James-Francis-Rodgers]

English translation of diegoshe's comment two posts above this post.

Hello!

My case is a little different and I am attaching a screen image to show what I mean. Could you help with this?

I want to change the thickness of the horizontal scrollbar at the top. This scroll bar allows you to switch between files. I drew a green arrow to indicate the scrollbar I want to change.

By the way, following the instructions given here, I put the code in the settings.json file (as you can see inside the red square) and it changed the horizontal scrollbar at the bottom (which is denoted by the red arrow). I don't need this one.

How can I change the top scrollbar to make it thicker and always visible?

I hope this was clear to you. If not, please let me know how I can improve my questions.

~diegoshe