隐藏滚动条,如果没有必要-Ace编辑器

Hide scrollbars, if not necessary - Ace editor

本文关键字:-Ace 编辑器 如果没有 滚动条 隐藏      更新时间:2023-09-26

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

有办法吗?有什么想法吗?

只需将overflow:auto css添加到右侧元素即可。我想可能是.ace_scroller。给我举一个滚动条的例子,或者使用对象检查器(Ctrl+Shift+I;Chrome、FF、Opera)自己查找。

编辑:

这是你的代码:

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

第2版:

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

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

或者使用动画:

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;
}

您可能还需要设置单词换行。

editor.getSession().setUseWrapMode(true)