Atom 编辑器中的渐变滚动条

Question

我想自定义我的 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 UI 主题。

Answer 1

在 styles.less

中添加以下代码即可解决此问题

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

Atom 编辑器中的渐变滚动条

Fading scroll bars in Atom Editor

atom-editor