css - 你如何在 Electron 中自定义滚动条？

Question

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

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

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

Answer 1

我可以确认 webkit 滚动条完全适合我在 Electron 中使用最基本的模板。尝试这个？
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);
}