时间戳

首页 > 解决方案 > 您如何在电子中自定义滚动条？

css - 您如何在电子中自定义滚动条？

问题描述

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

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

解决方案搜索数 1

解决方案搜索编号 2

解决方案搜索编号 3

解决方案搜索编号 4

解决方案搜索编号 5

解决方案搜索数 6

解决方案搜索编号 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

标签： cssnode.jselectronscrollbar

解决方案

我可以确认 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);
}

推荐阅读