您如何在电子中自定义滚动条？答案

【问题标题】：How do you make your own customize the scroll bar in electron?您如何在电子中自定义滚动条？
【发布时间】：2020-04-22 14:30:55
【问题描述】：

我知道如何使用::-webkit-scrollbar 自定义滚动条，我知道它的工作原理，因为我使用它制作了一些项目，但由于某种原因它似乎不适用于电子，我真的对此感到目瞪口呆，因为电子基于铬，它应该可以工作。

无论如何，这些是我搜索并尝试过但没有奏效的一些解决方案

Solution Searched Number 1

Solution Searched Number 2

Solution Searched Number 3

Solution Searched Number 4

Solution Searched Number 5

Solution Searched Number 6

Solution Searched Number 7

在过去的几个小时里，我搜索的不止这些，但这些是我记得最清楚的。

无论如何，这是我的滚动条的 css 代码

::-webkit-scrollbar {
    width: 17px;
    height: 17px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: var(--scroll-bar-track-bg-color);
    opacity: 0.01;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scroll-bar-handle-bg-color);
    box-shadow: inset 0 0 6px var(--scroll-bar-handle-bg-color);
    -webkit-box-shadow: inset 0 0 6px var(--scroll-bar-handle-bg-color);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: var(--scroll-bar-track-bg-color);
}

如果您想知道是不是因为命名的 css 变量，我告诉您不是因为我试图删除 css 变量并使用普通的十六进制代码甚至 rgb 代码来确定它没有的颜色工作。

我在这里真的很茫然，所以我希望任何人都可以帮助我，我已经看到答案说它适用于他们的项目，尝试过但它不适用于我的项目。

我已经阅读了有关 nodeIntegration: false 的信息，但如果我这样做了，我的代码将会中断，因为我在我的项目中使用了 ipcMain 和 ipcRenderer

【问题讨论】：

标签： css node.js electron scrollbar

【解决方案1】：

我可以确认 webkit 滚动条完全适合我在电子中使用最基本的模板。试试这个？

HTML：

<div class="scroll_enabled"> your content </div>

css:

.scroll_enabled {
    overflow: scroll;
    height: 1000px; /* define your custom height */
}

.scroll_enabled::-webkit-scrollbar {
    width: 20px;
}
.scroll_enabled::-webkit-scrollbar-corner {
    background: rgba(0,0,0,0);
}
.scroll_enabled::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 6px;
    border: 4px solid rgba(0,0,0,0);
    background-clip: content-box;
    min-width: 32px;
    min-height: 32px;
}
.scroll_enabled::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0);
}

【讨论】：