Is there a way to change styling of the react-ace editor default Scroller?

Question

I am making up a webpage in which react-ace editor takes up 50% of the page's width and 90% of page's height. After the editor has a vertical scroller on writing some code, I want to style the default vertical scroller shown.

I can get the instance of the editor using -

const reactAceComponent = this.refs.reactAceComponent;
const editor = reactAceComponent.editor;

by putting reactAceComponent ref on Editor.

And after that I am able to change Scroller height and width etc. But how do I style the Scroller itself?

Suppose I want to give the scroller a class "style-scroller" and do something like this :

#style-scroller::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-scroller::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-scroller::-webkit-scrollbar-thumb
{
    background-color: #3366FF;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(0deg,
                                              rgba(255, 255, 255, 0.5) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, 0.5) 50%,
                                              rgba(255, 255, 255, 0.5) 75%,
                                              transparent 75%,
                                              transparent)
}

Is it possible to give custom styling to scroller? Where do I even start? Please help me.

score 2 · Answer 1 · answered Apr 30 '19 at 23:33

You can use .ace_scrollbar class to target scrollbars in ace, and .ace_scrollbar-v, .ace_scrollbar-h to target only vertical or horizontal scrollbars (but :horizontal pseudo class works for that too).

A simpler alternative which is used in cloud9 https://github.com/c9/core/blob/c4d1c59dc8d6619bdca3dbe740291cd5cd26352c/plugins/c9.ide.ace/scrollbar.js#L22 is using ::-webkit-scrollbar alone to target all scrollbars

score 1 · Answer 2 · answered Sep 01 '22 at 13:20

I added a simple CSS and it worked for me!

.ace_scrollbar::-webkit-scrollbar {
    height: 7px;
    width: 7px;
}

.ace_scrollbar::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #272822; /* Matches ace monokai */
    border-radius: 10px;
}

.ace_scrollbar::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
    border-radius: 10px;
}

Producing this inside a Chrome Extension:

Is there a way to change styling of the react-ace editor default Scroller?

2 Answers2