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.

[uwla]

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?

[jeffistyping]

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.

[alexdima]

Appologies, I might have closed this too quickly. editor.scrollbar.vertical is now a real setting, but that only covers the editor.

[katerlouis]

Any news here?

[dsuch]

Hello,

yes, it has taken me far too long to bring the normal scrollbars back.

With VS Code 1.62.3 (ccbaa2d), here is what I have so far. It would be great if someone could add all the other missing parts.

Note that in my case the panel is on the right-hand side.

Here are the changes:

• To display the scrollbar in the editor: add "editor.scrollbar.verticalScrollbarSize": 20, to user settings
• To display the scrollbar in the panel:
  • Add a custom CSS file with Custom CSS and JS Loader
    
  • To that file, add this snippet:

.monaco-scrollable-element>.visible {
    background: #f3f3f3;
    width: 20px !important;
}

• To permanently display the scrollbar in the panel, back up file workbench.desktop.main.js in your VS Code installation and delete this snippet &&(this._verticalScrollbar.beginHide(),this._horizontalScrollbar.beginHide())

The missing and incomplete functionality is:

• No scrollbar arrows
• In the panel scrollbar, the thumb is thinner than the background (the whole background acts as a scrollbar that can be clicked though and, effectively, this means that the scrollbar really is wider)

Could someone be please so kind as to learn how to add these missing pieces and post the resolution to this ticket? Hopefully this should be only a matter of custom CSS.

A short note to developers - there is no glory in adding features just for the sake of innovation.

At one point, you are overshooting your users and customers with changes that are not required and that are added purely because that can be done, not because they are needed.

Constantly tweaking the scrollbars, hiding, removing, fading out or obscuring them along with similar practices are the kind of low-hanging fruits that bring no progress. These are not problems that need resolving.

I realize that you are merely a part of a bigger trend among GUI designers who are not sure what to do next but understand that at one point the product, or a given part of it, is complete. The next step is to find a new product, not to find a way to constantly modify the existing one.

Resist the urge to modify just because it can be done. We already know that you are capable of building a good product. There is no shame in not changing what works well. Indeed, this is where wisdom lies.

Thank you.

[otonielguajardo]

c'mon maaaan

[romanholidaypancakes]

any plan for all scrollbar

[logicbus]

I got pointed to this issue because I created a similar issue that didn't get enough votes: #152113 .

My first recollection of a disappearing scrollbar was the first iPhone. On a smartphone screen, UI elements have to be pretty large in order to be interacted with. So a scrollbar exists there more as a feedback mechanism -- an indicator of where you are in a page, and maybe how long the page is -- rather than a tool to convert user input.

Many paradigms from small, touch-enabled screens have made their way to large, traditional screens, and some have been for the worse. This is one of them. Yes, showing the scrollbar all the time whether its needed or not is a waste of space. (Didn't IE11 do that?) And VS Code packs a lot in a single window. But making scrollbars hard to interact with -- or hard to find! -- sucks.

Make them easy to see, make them easy to drag, and maybe don't make them disappear after half a second.

[nathan-alden-sr]

Pretty crazy that after nearly four decades of visual interfaces in software, there is still software (Visual Studio Code) that doesn't even implement scrollbars well. C'mon, Microsoft. This has been a solved problem for decades.

[jez9999]

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

I'd just note that the above doesn't work for the scrollbar in the explorer to the left.

[xXNickznXx]

I opened another issue on the same topic some time ago: #160804

And now I see that there is this one. Mine kind of extends this one and I also see alot of comments here, that are on the same topic as mine, but I don't know how to deal with it now.

[avanember]

Why is so hard to implement this? It's very annoying.

[davidjoffe]

Adding a vote to please be able to (1) disable scrollbar fading, (2) disable scrollbar disappearing (except if content not scrollable, then it should disappear), and (3) be able to increase/configure width of explorer scrollbar

There's a principle in User Interface design 'larger targets are easier to hit' (Fitt's Law, a principle that some days it feels has become forgotten knowledge). Scrollbars generally used to be wider relative to display width, then at some stage there was a trend toward impractically narrower scrollbars

Scrollbars serve important practical purposes to users even if some may not like them

This may sound like a minor nitpick, but I'm trying to do a tricky merge task of four different branches of a repo loaded at once so I can quickly jump around and view/compare/edit/consolidate the four different branches via explorer, and not being able to see the scroll position means I can't even see what repo I'm looking at (the most important thing). (Combine this with the overly narrow scrollbar on my high-DPI hi-res laptop - they're really very narrow - and distracting auto-fading). I'll try Visual Studio instead.

I know VS Code is free, so I'm not bashing and I don't expect devs should work for free if there's no time to implement this. If I had time I'd try submit a PR

(The problem is compounded by the resize grab-handle also being invisible until you float the mouse over it, something I'd also always prefer to always be visible), so it's easy to hit the resize grab when aiming for the scrollbar.)

Sorry for long comment

[heinrich-ulbricht]

Another vote from my side. After increasing the sash ("resize grab-handle") width to something that can actually be used via RDP connection it nearly completely overlaps the scroll bar of the tool windows. Now I'd like to make the scroll bars wider as well, to be able to use them. And this brought me here ^^

(An alternative for my use case would be to make the sash visible at all times instead of fading it in, overlaying what's there. This would solve the scrollbar-accessibility issue as well.)

[aifirstd3v]

There is no scrollbar setting option for Explorer, Sidebar.