Option to configure editor scrollbar to be opaque

[killerkalamari]

Currently, if editor.renderLineHighlight is set to "line" or "all", the highlight extends into the scrollbar. It would be helpful if it stopped just left of the scrollbar. Here is my rationale:

• The line position isn't the same as the scrollbar position, except by coincidence. They are independent, however the highlighting suggests a linkage of some kind.
• With certain color schemes it can be confusing at a quick glance to determine where on the scrollbar I actually am.

Example of intrusion of line highlight into the scrollbar:

Notice how similar the two highlighted areas look on the scrollbar? On closer inspection I can tell that I am actually at the lower point on the scrollbar, because of the brown horizontal line.

As a workaround, I could easily change the color of the highlight to prevent confusion. But, I'm having trouble understanding why the highlight extends into the scrollbar in the first place.

Thanks for your consideration!

VS Code 1.22.1

[vscodebot[bot]]

(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• scrollbar consumes mouse clicks even when scrollbar is not present (#22699)
• Settings - highlighting of search input in scrollbar area (#45810)
• Option to render proper scrollbar (#15106)
• Add option to disable rendering of problems in scrollbar (#46201)
• Horizontal scrollbar doesn’t shrink after the long line getting shortened (#13516)

[alexdima]

The reason is that the scrollbar is transparent. Even characters are visible through the scrollbar.

[ghost]

Having a transparent scrollbar is nuts. Who thinks editor text that is visible in the scrollbar is a good thing?

There is no option that I can find to get the editor to work like, well, ALL other editors...

[duffyjp]

I'm not a frequent VSCode user-- Today I thought there was no horizontal scrollbar as it looks exactly like highlighted search text. I'd vote for a system native scrollbar.

[simonmurdock]

Today I was wondering where my horizontal scrollbar was, turns out it's there, but almost invisible

[robertrossmann]

This is now partially implemented by using a new colour contribution, editorOverviewRuler.background. Using this, you can set the background colour of the scrollbar, but the colour is only used when the minimap is visible and placed on the right side of the editor. For all other situations, the scrollbar is still transparent.

[BttCld]

Le scrollbar trasparenti sono una minchiata. Perche' non vi dedicate a qualcosa di piu' utile? En: The transparent scrollbars are a "minchiata". Why don't you dedicate yourself to something more useful?

[abbychau]

I would like to have a scrollbar like this too!

[RedHatTurtle]

This is the worst scrollbar I have ever seen, please fix this asap

[abbychau]

The reason is that the scrollbar is transparent. Even characters are visible through the scrollbar.

Why the characters are needed to be placed under the scrollbar? this is the problem.

[eightbit]

I don't see how one could advocate a transparent scroller as good UX design. It makes the editor significantly less efficient. At minimum please add a setting for scroller transparency.

[bploetz]

A work around (care of @jakequinter), add this to your settings.json and set it to the color you want, and the scrollbars will be that color and no longer transparent.

    "workbench.colorCustomizations": {
       "scrollbarSlider.background": "#333333",
       "scrollbarSlider.hoverBackground": "#333333",
       "scrollbarSlider.activeBackground": "#333333",
    }

[nstbayless]

@bploetz's workaround only makes the scrollbar slider opaque.

A workaround to make the scrollbar itself opaque while not having a visible minimap:

"editor.minimap.maxColumn": 0,
"editor.minimap.enabled": true,

Make sure to enable the minimap for this to work.

Hopefully the underlying bug will be fixed eventually and this workaround won't be necessary.

[ps2goat]

"workbench.colorCustomizations": { "scrollbarSlider.background": "#333333", "scrollbarSlider.hoverBackground": "#333333", "scrollbarSlider.activeBackground": "#333333", }

This seems to work, but only when the frame has focus. For example, my code area's scrollbar sliders disappear if my cursor is in any sidebar or the terminal.

[nstbayless]

@ps2goat try these settings:

"editor.minimap.maxColumn": 0,
"editor.minimap.enabled": true,

[ps2goat]

I already have the minimap open, but I tried this anyway and it didn't work. The ~scrollbars~ scrollbar slider still disappears if the focus changes to a different area.

Update 2023-09-06: The issue I was attempting to fix here is now a new feature request issue

[snackbean]

@ps2goat scrollbar slider disappearing when losing focus is a different issue. This issue is about the scrollbar itself being transparent. I would suggest opening a new issue for that.