Vscode: Disable fading scrollbars

[jez9999]

There should be a way to disable fading scrollbars. I like the scrollbars to always appear so I can always see at-a-glance where I am in the document.

[alexdima]

You could use these "un-official" options (and restart VSCode):

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

[jez9999]

@alexandrudima Interesting, they seem to work perfectly. Any idea why they aren't official?

[alexdima]

The current shape of the scrollbar options is not really user friendly... There are other scrollbar. options in there that need more work to make them good enough to be "official". It's also pretty rare that someone wants to mess with the defaults ;).

Also, they require more code to react when they're changed (like all the other editor options we have), while these ones require an editor recreation or a restart.

[markshust]

I believe this could be considered an accessibility issue. Coders who are hard of seeing have a very rough time locating scrollbars, and accessible considerations should permit scrollbars to be always viewable. (Mac's have this option if you go to Settings > General > Show scroll bars --- they have this option for a reason).

I also use a somewhat-accessible device (Wacom Tablet), and having these always visible greatly enhances my productivity.

[markshust]

fyi, these do work after restart:

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

however, they do not apply to the left explorer tree menu.

[danielsokolowski]

Auto hiding scrollbars should togglable and disabled by default, it's a fancy and trendy but a poor UI experience.

[danielsokolowski]

Also the suggestions popup have a fading scrollbar. So gauging the number of possible choices, if there are any is hindered when the bar fades away.

Does anyone have a workaround to disable all fading scrollbars?

[top-master]

The mentioned "editor.scrollbar.vertical": "visible" is unofficial but works.
where is the list of available options (which auto-completes for the settings.json file) we just should add that there, I mean anyone can contribute or not?

[peternann]

The 'fading scrollbar' scheme is nothing less than a disaster for searching in the Terminal window. Try using a ctrl-f search in the terminal window to find the FIRST occurrence of a string in long output! It's just about impossible because you can't tell where your search is starting, or where the current hit is...
Would all be clear if the dang scrollbar was visible... ;-(
The settings suggested above do work for the editor window, but not for the Terminal window (etc).
This really needs to be configurable.

[t00]

Fading scrollbars are indeed counterintuitive - to scroll the project navigation tree one needs to guess existing scrollbar's position by hovering over the navigation area followed by a "change of mouse trajectory" to account for an often wrong guess. UI guidelines should forbid hidden clickable dynamically positioned objects on an application screen, reminds me of old Windows 95 viruses with a click me dialog escaping the mouse cursor. Please at least add an undocumented option to disable hidden, faded scrollbar handles in all other places than editor as well.

[jalovatt]

I'll add another instance where the fading scrollbar is unhelpful - the revised Extensions view. If my Installed extensions are longer than the visible area, there's (AFAIK) only a tiny number in the corner that would indicate it.

An option to force all scrollbars, all the time, seems like a no-brainer to me.

[heartfelttech]

Also an option to hide all scrollbars, all the time. Mac users mostly see scrollbars as a relic from the 90s

[elias6]

Ummm... scrollbars on Mac are not "a relic from the 90s". The option to show scroll bars all the time can be enabled in recent MacOS versions by going to Preferences and General.

Speaking of which, can VS Code for Mac be made to either show the scrollbars all the time or auto-hide them depending on how the user has that setting? That seems like it would make the most users happy without requiring them to change their VS Code settings.

[inwardmovement]

Disabling all scrollbars' fading would be a good feature indeed.

[kanlukasz]

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

• work ok
• restart is not required, reload is sufficient

In settings and problems have a flag Unknown configuration setting - probably because it's not official option. Not nice

Please add it to official release. It's VERY useful

[kanlukasz]

Related: #66000

[DirkDeclercq]

As coming from decades of VisualStudio-world programming, I definitely like to have the option to disable fading of scrollbars for all windows (explorer, Source Control, extensions, editor, ... ).
This is something like 'we gonna change some standard from the past, because we like to change something' ;)

[laurent22]

As the setting is already available, it should be made official or even better, just always show the scrollbar. Right now it's hard to use it - first you need to move the mouse somewhere were you think it might be, but if you went too far, it shows up and disappears again, so you need to move the mouse back.

If you drag it, then release, and move the mouse too far, it disappears again. Why would anyone want to inflict that on their users? Just show the scrollbar, it's ok, it's been like that for decades and nobody needs your fancy scrollbar that plays hide and seek.

[Annedrea]

There is a workaround which I used that others may find useful. It allows for the scrollbar and activityBar to be visible and I find more accessible that Is added to settings.json

“workbench.colorCustomizations”: {
“activityBar. background”: “#ff0000”,
“scrollbarSlider.background”: “#ff0000”,
“scrollbar.shadow”: “#ff0000”,
“scrollbarSlider.activeBackground”: “#ff0000”
}

[kanlukasz]

There is a workaround which I used that others may find useful. It allows for the scrollbar and activityBar to be visible and I find more accessible that Is added to settings.json

“activityBar. background”: “#ff0000”,

ActivityBar has nothing to do with scrollbars

“scrollbarSlider.background”: “#ff0000”,
“scrollbar.shadow”: “#ff0000”,
“scrollbarSlider.activeBackground”: “#ff0000”

The above keys have nothing to do with the fading and lack of visibility of the scroll bars. It just changes colors, not behavior

[victor-yarema]

This issue has been opened on "Oct 1, 2017". It is 2020 outside and still nobody can simply REMOVE the feature that was explicitly added (I refuse to believe that fading scrollbars were like that by default) and that annoys so many people.
I still didn't find any workaround for fading scrollbars in Side Bar.

[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

[darsain]

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: #98632

That doesn't solve 80% of the issues described here, it would only solidify the currently very limited scrollbar hiding configuration.

We need one global or individual toggles for all scrollbars in the app, such as:

• editor
• explorer (side bar)
• file tabs (thorizontally scrollable when overflowing)
• panels (terminal)
• suggestion boxes
• settings
• and probably more

I'd also like for the scrollbars to be a bit nicer, thinner, detached from sides a bit, transparent, floating above content and not wasting space, but I'd settle for at least usable ones.

[kanlukasz]

That doesn't solve 80% of the issues described here

I have not said anywhere that this will solve this issue. 😉
I decided to share it because it's somehow a related issue and could interest someone

"editor.scrollbar.verticalScrollbarSize": 10
"editor.scrollbar.horizontalScrollbarSize": 10

I'd also like for the scrollbars to be a bit nicer, thinner

Let me disagree. Thinner scrollbars appear in Sublime and PHPStorm and are not visible enough

Anyway you can try editor.scrollbar.verticalScrollbarSize and editor.scrollbar.horizontalScrollbarSize.
This is still not the perfect solution, but it can help

[darsain]

This is still not the perfect solution

That is the problem. You are trying to solidify and set in stone an inadequate solution. This might make fixing this whole problem harder in future, since it would mean deprecating these settings.

And all that just so you don't get the "Unknown configuration setting" hints?

[cmgerdes]

Is there also a setting that will prevent the scrollbars from overlaying over the top of the editor? Specifically, I want the scrollbar to have its own space and not be layered on top of the code.

It's super frustrating to go to move the scrollbar and accidentally end up clicking on the code and highlighting it and having your window jump all over. Making the scrollbars always visible helps reduce this, but I'd really like traditional scrollbar styles where they're not transparently placed on top of the code editor. This sort of transparency stuff makes the UI looks nice but often makes it harder to use, and I think how scrollbars are handled is a great example. For me, this is something I use to get work done and I want the UI to be efficient, before pretty.

[stinos]

I decided to share it because it's somehow a related issue and could interest someone

"editor.scrollbar.verticalScrollbarSize": 10

Unlike the editor.scrollbar.vertical setting this to 0 actually works for me to get rid of the scrollbar. Which is good because I use the minimap for everything so having a scrollbar next to it is pretty useless, plus the scrollbar has a different scaling so it's also confusing and visually disturbing.