I've been experimenting with Ace Editor and I've been trying to automatically "hide" (= not use the system defaults) the vertical/horizontal scrollbars, when not in use.

Is there a way? Any ideas?

I've been experimenting with Ace Editor and I've been trying to automatically "hide" (= not use the system defaults) the vertical/horizontal scrollbars, when not in use.

Is there a way? Any ideas?

• javascript
• ace-editor

2 Answers 2

Just add overflow:auto css to the right element. I think that could be .ace_scroller. Give me example with scrollers or find by yourself using Object Inspector (Ctrl + Shift + I ; Chrome, FF, Opera).

Edit:

There is your code:

body .ace_scrollbar-v {
    overflow-y: auto;
}

body .ace_scrollbar-h {
    overflow-x: auto;
}

Edit2:

Hide scrollbar If editor isn't hovered:

body .ace_scrollbar {
    display: none;
}
body .ace_editor:hover .ace_scrollbar {
    display: block;
}

Or with animation:

body .ace_scrollbar {
    -webkit-transition: opacity .3s ease-in-out;
       -moz-transition: opacity .3s ease-in-out;
        -ms-transition: opacity .3s ease-in-out;
         -o-transition: opacity .3s ease-in-out;
            transition: opacity .3s ease-in-out;
    opacity: 0;
}
body .ace_editor:hover .ace_scrollbar {
    opacity: 1;
}

You may want to set the word wrap too.

editor.getSession().setUseWrapMode(true)