[Feature Request] Rounded scroll bar

[Wissperwind]

Context

• [X] This issue is not a bug report. (please use a different template for reporting a bug)
• [X] This issue is not a duplicate of an existing issue. (please use the search to find existing issues)

Description

Hi

I included the monaco editor in my website. But the website use modern style rounded scrollbars. Like this:

*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    border-radius: 8px;
}

*::-webkit-scrollbar-thumb {
    height: 56px;
    border-radius: 8px;
    border: 4px solid transparent;
    background-clip: content-box;
    background-color: #888;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

It does no look good if the whole website has rounded scrollbars, but the editor has thick square ones. Can you please provide an option for rounded scrollbars?

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

[paustint]

I did some very basic poking around on the playground and looks like the scrollbars are hand-rolled and are not native browser scrollbars, so you can most likely use normal CSS to style these (as demonstrated in the demo)

.monaco-editor .monaco-scrollable-element .scrollbar.horizontal, .monaco-editor .decorationsOverviewRuler, .monaco-editor .monaco-scrollable-element .scrollbar.vertical .arrow-background

You will need to figure out what classes to target - but it is all here in the browser for your exploration and customization.

[Wissperwind]

So there are two types of Scrollbars widely used: The Win 10 Style Block ones often with arrwos and the round ones withour arrwos.

You see examples in your screenshot.

How about the idea to make a switch in the monaco editor wether you like the square ones ore the thin rounded ones? With the rounded scroll thumb I mean. That would make it easier for developers to get the right scrollbar for their needs.

[Web-Dev-Machina]

Rounded corners:

.monaco-editor { border-radius: 10px; } .overflow-guard { border-radius: 10px; }

Rounded slide-bar:

.slider { border-radius: 10px; }

[AzureIP]

border-radius: 10px; makes them rounded. One step done. Can you also tell me what options to change, to make them half as thick and to increase the opacity? Is it possible to let the text end at the scrollbar?