Make horizontal scrollbar more visible in Visual Studio code

Question

The following screen shot is of Visual Studio code viewing a text file which is wider than the screen:

There is a horizontal scrollbar (barely) visible at the bottom of the screen. I find this difficult to see (I just spent 20 minutes searching for how to add a horizontal scrollbar because I didn't even know it was there). In fact, by default it fades to invisible if the window doesn't have focus. There is a fix for this in the following (undocumented) setting:

"editor.scrollbar.horizontal": "visible"

However, I still find this unsatisfactory. Is there any way to improve this situation? The scrollbars in Visual Studio itself are fine, for example.

(Note: I'm aware of word wrap, but that's not what I want.)

Mark · Accepted Answer · 2021-07-03T04:13:44.640

12

You can give it a more obvious color:

 "workbench.colorCustomizations": {
    
    "scrollbarSlider.background": "#ff0000",
    "scrollbarSlider.hoverBackground": "#0088ff",

}

There are a couple more scrollbar color settings you can try, these affect both vertical and horizontal scrollbars though.

As of v1.58 see https://stackoverflow.com/a/46634103/836330 for more officially exposed scrollbar settings including

editor.scrollbar.verticalScrollbarSize
editor.scrollbar.horizontalScrollbarSize

edited Jul 03 '21 at 04:13

answered Sep 12 '18 at 14:05

Mark

143,421
24
428
436

That is a massive improvement. Thanks. Might not quite go for red... :-) – bornfromanegg Sep 12 '18 at 15:29
See also https://stackoverflow.com/a/68233096/836330 for more scrollbar options. – Mark Jul 06 '21 at 15:20

score 1 · Answer 2 · answered Jan 27 '19 at 19:28

1

,"editor.scrollbar.verticalScrollbarSize": 10
,"editor.scrollbar.horizontal": "visible"
,"editor.scrollbar.horizontalScrollbarSize": 15

How to make scrollbars wider in Visual Studio Code?

answered Jan 27 '19 at 19:28

ilias

313
2
10

Make horizontal scrollbar more visible in Visual Studio code

2 Answers2