Scroll bar visibility should be configurable

[SetTrend]

VSCode Version

Steps to Reproduce

1. Open Visual Studio code and open a large text file

Current Behaviour

In Visual Studio Code, editors' scroll bars auto hide, thereby thwarting targeting the scroll bar handle when moving the mouse.

Expected Behaviour

Visual Studio Code should follow the Windows system setting Settings > Ease of Access > Display > Automatically hide scrollbar in Windows

Does this issue occur when all extensions are disabled?

• [x] Yes
• [ ] No

[isidorn]

We will not respect the windows options because this is not exposed by Electron. However we could expose a vscode setting for changing the scroll bar behavior. Currently the editor supports changing this internally, however we would need an external setting.

Thus leaving this open as a feature request to see if more users request it.

fyi @alexandrudima @bpasero

[SetTrend]

Thanks, isidorn. Your efforts are highly appreciated. 👍

[alexdima]

@SetTrend There is a "hidden" setting you can use, but you need to restart VS Code for the setting to apply

{
  "editor.scrollbar.vertical": "visible",
  "editor.scrollbar.horizontal": "visible"
}

[isidorn]

@alexandrudima why isn't this exposed via our settings schema? That's the reason why I could not find the setting originaly.

[SetTrend]

Thanks!

It seems, though, as if this setting doesn't affect the Explorer view, does it?

[isidorn]

@SetTrend yes, this only affects the editor.

[alexdima]

@isidorn because "you need to restart VS Code for the setting to apply", i.e. work is needed in the scrollbar and in the editor to handle the change event.

[usernamehw]

But there are already settings that require reload of the window and they just prompt for it.

[alexdima]

AFAIK none of the (code) editor settings ask for a reload. I know disabling the telemetry crash reporter process requires a restart, but the settings that really need a restart should IMHO be very few.

I am not arguing about anything... I am just describing that to expose these as real user settings some work needs to be done to polish things, to react to the change event, perhaps even come up with better names and make things more consistent. We have a lot of scrollbar settings and we should see which ones we want to expose and how. -- https://github.com/Microsoft/vscode/blob/5aba426b77d58dbeedbc539d1780931b917cb8bb/src/vs/editor/common/config/editorOptions.ts#L2595:L2610

But this requires some work and should be therefore planned.

[SetTrend]

... and, I may add, to extend this feature to all panels, including Explorer and Terminal, as it should be an application wide accessibility setting, not an editor feature.

[kanlukasz]

Related: https://github.com/Microsoft/vscode/issues/35454

[amirea]

{
 "editor.scrollbar.vertical": "hidden",
 "editor.scrollbar.horizontal": "hidden"
}

Currently the scrollbar in the editor is not hidden, it's only the handle that's gone. The horizontal scrollbar behaves as expected i.e. completely gone. This applies regardless of minimap (which I like).

[kanlukasz]

For subscribers of this issue: If you are interested in publishing the editor.scrollbar .... option as official, you can vote for it in this issue: https://github.com/microsoft/vscode/issues/98632

[gjsjohnmurray]

I experimented by adding code at the end of https://github.com/microsoft/vscode/blob/135e5d9323a30ac64eb9e3356f1828aef0920e91/src/vs/base/browser/ui/scrollbar/scrollableElement.ts#L592

to transform ScrollbarVisibility.Auto to ScrollbarVisibility.Visible

    if (result.vertical === ScrollbarVisibility.Auto) {
        result.vertical = ScrollbarVisibility.Visible;
    }

    if (result.horizontal === ScrollbarVisibility.Auto) {
        result.horizontal = ScrollbarVisibility.Visible;
    }

It worked nicely, but the challenge will be to make this conditional on a new user setting called something like window.alwaysShowScrollbars

Is it feasible to check such a setting here? Or am I too deep in the call stack to get access to settings?

[SetTrend]

Pardon me for probably requesting a leap too large at this time, but perhaps OS accessibility settings may be taken into account as a third option (ScrollbarVisibility.OS):

[gjsjohnmurray]

In https://github.com/microsoft/vscode/issues/66000#issuecomment-451876527 @isidorn previously said Electron doesn't expose this setting.

[SetTrend]

Oh, pardon me. I just flew over this issue without re-reading the history. 😳

[SteelBlueVision]

Tired of this nonsense, I just removed the hiding logic from VS Code myself:

In the file resources/app/out/vs/workbench/workbench.desktop.main.js relative to your installation of VS Code, just remove the following part of the code to completely disable the scrollbar hiding for good: ||(this._verticalScrollbar.beginHide(),this._horizontalScrollbar.beginHide())

..., being careful not to touch any code before or after!

For contextual information around the change, this should change the following string: {this._mouseIsOver||this._isDragging||(this._verticalScrollbar.beginHide(),this._horizontalScrollbar.beginHide())} to the following: {this._mouseIsOver||this._isDragging}

... , removing this garish scrollbar fadeout aberration from occurring while editing in VS Code, since there is still, to date, no reliable way to opt out of this behavior (and no, setting the environment variable: VS_CODE_ALWAYS_SHOW_SCROLLBARS=1 and restarting, does not disable scrollbar fadeout, because the commit that implements this apparently has still not been merged into the mainline).

In case you are not aware, scrollbars can be made partially transparent, so as not to obscure anything, begging the question of why is it necessary to hide them, ever?

[gbritton1]

@SetTrend There is a "hidden" setting you can use, but you need to restart VS Code for the setting to apply

{
  "editor.scrollbar.vertical": "visible",
  "editor.scrollbar.horizontal": "visible"
}

If you set the vertical option to hidden, the gutter still shows:

[tejasvi]

@gbritton1 Set "editor.scrollbar.verticalScrollbarSize": 0, and make sure minimap is disabled.

[HuskyNator]

If you set the vertical option to hidden, the gutter still shows:

This is the main thing bugging me as well.

[peter-fb]

The editor.scrollbar.* settings are nice, but we still need a setting to disable fading scrollbars everywhere, especially in the file explorer.

[peter-fb]

Quoting @alexdima from pull request #102741:

(...) I think we need a new global setting like scrollbar.visible: "auto" | "never" | "always" and then this setting needs to be adopted in all users of the scrollableElement widget.

[SetTrend]

@peter-fb: I also believe that the scrollbar is a vital, indispensable information that is relevant to all users – even those who are predominantely using the keyboard for input.

[kimjamia]

And why is it not the default behavior to show scrollbars? What's the purpose of hiding that useful information?

[paps]

Would it be possible to have a global setting to keep ALL the scrollbars visible at all times? editor.scrollbar.vertical and editor.scrollbar.horizontal work well for the editor pane, but the other panes still have disappearing scrollbars, which is unfortunate. Thanks

[tobsecret]

Is there a setting for the scrollbar that let's you scroll through your tabs? I tried setting all the horizontal scrollbar settings to visible but none of them seem to affect that particular scrollbar.

[SetTrend]

I would very much appreciate if this setting also applied to all scrollable panels in VS Code.

While debugging, I'm repeatedly and helplessly navigating with the mouse into the Variables/Watch/Call Stack panels, aiming at false positions first, because I don't clearly perceive their borders and ranges until the scrollbars slowly blend in.

Please have this amended.

/ref: #192305, #195974

[DoogeJ]

+1 since there is a question to see if more users request it.

It would save me a lot of time and frustration to not hover vaguely in the scroll bar area for a few seconds for it to become usable.

[MatsSvenssonNewseed]

+1 Why is this still a thing in 2024? Just rip the hacky code out, that hides the scrollbars. Do it today.

And stop assigning people who know nothing about usability to design your UI.

[Alecton4]

If you want to force showing all the scrollbars right fking now (for VSCode Version: 1.85.1, Commit: 0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2), do the following hack:

1. Search for &&(this.c.beginHide(),this.g.beginHide()) in code/resources/app/out/vs/workbench/workbench.desktop.main.js in the VSCode installation directory. It might be slightly different in other versions of VSCode.
2. There are 3 beginHide() in the file, but just delete exactly the &&(this.c.beginHide(),this.g.beginHide()) part. Do not touch other parts of the file.

First discovered in SteelBlueVision's reply.

[MatsSvenssonNewseed]

If you want to force showing all the scrollbars right fking now (for VSCode Version: 1.85.1, Commit: 0ee08df), do the following hack:

1. Search for `&&(this.c.beginHide(),this.g.beginHide())` in `code/resources/app/out/vs/workbench/workbench.desktop.main.js` in the VSCode installation directory. It might be slightly different in other versions of VSCode.

2. There are 3 `beginHide()` in the file, but just delete exactly the `&&(this.c.beginHide(),this.g.beginHide())` part. Do not touch other parts of the file.

First discovered in SteelBlueVision's reply.

Thanks, tried that before and it worked. ...for a while. Seems like such hacks are washed away, probably by updates.

Besides, I think it would be more appropriate to require ugly hacks for hiding the scrollbars, not for bringing them back. Let the ones who want to F around with the UI do the work, not the rest of us to fix their crap.