Блог

Я хотел бы настроить свой редактор Atom так, чтобы все полосы прокрутки исчезали, когда их родительский элемент не наведен курсором. Пытаясь добиться этого, я добавил следующие строки в свою styles.less таблицу стилей:

 atom-text-editor.editor {
    .horizontal-scrollbar, .vertical-scrollbar {
        opacity: 0.2;
        transition: opacity 250ms;
    }
    .scroll-view:hover .horizontal-scrollbar {
        opacity: 1;
    }
    .scroll-view:hover .vertical-scrollbar {
        opacity: 1;
    }
}
  

Это очень хорошо работает для представления главного редактора. При наличии двух или более панелей полоса прокрутки зависшего файла отображается полноцветным цветом, в то время как другие полосы исчезают. К сожалению, это относится только к файлам, а не к древовидному представлению. Как бы мне адаптировать приведенный выше код, чтобы включить полосы прокрутки древовидного представления, а также полосы прокрутки файлов? Я использую тему пользовательского интерфейса Atom Material.

Эта проблема решается путем добавления следующего кода в styles.less

 // fading scrollbars when pane not hovered
.pane:not(:hover) {
    ::-webkit-scrollbar {
        amp;-thumb {
            background-color: rgba(68, 169, 249, 0.3);
        }
    }
}