如果不需要,隐藏滚动条 - Ace 编辑器

Dr.*_*eon 2 javascript ace-editor

我一直在尝试使用Ace Editor,并且一直在尝试在不使用时自动“隐藏”(= 不使用系统默认值)垂直/水平滚动条。

有办法吗?有任何想法吗?

Krz*_*iek 6

只需将overflow:autocss添加到正确的元素。我认为那可能是.ace_scroller。给我一个滚动条的例子,或者自己使用对象检查器(Ctrl + Shift + I ;Chrome、FF、Opera)找到。

编辑:

有你的代码:

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

body .ace_scrollbar-h {
    overflow-x: auto;
}
Run Code Online (Sandbox Code Playgroud)

编辑2:

隐藏滚动条如果编辑器没有悬停:

body .ace_scrollbar {
    display: none;
}
body .ace_editor:hover .ace_scrollbar {
    display: block;
}
Run Code Online (Sandbox Code Playgroud)

或者用动画:

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;
}
Run Code Online (Sandbox Code Playgroud)