CODEWITHSUNDEEP
cssnode.jselectronscrollbar
Shinichi Garcia
Shinichi Garcia

Reputation: 105

How do you make your own customize the scroll bar in electron?

I know how to customize the scroll bar using ::-webkit-scrollbar, I know its working since I have made some projects using this but it doesn't seem to work with electron for some reason, I'm really dumbfounded with this since electron is based on chromium it should have worked.

Anyways these are some of the solutions I've searched and tried but didn't work

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

I have searched more than this in the past few hours but these are the ones that I remember the most.

Anyway here is my css code for my scrollbar

::-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);
}

If your wondering if its because of the named css variables, I'm telling you its not the case coz I tried to remove the css variables and used a normal hex code and even rgb codes to determine the color it doesn't work.

I am really at a loss here so I hope anyone can help me, I've seen answers saying that it works on their projects, tried it but its not working in my project.

I've read about nodeIntegration: false but if I do that my code will break since I'm using the ipcMain and ipcRenderer in my project

Upvotes: 8

Views: 7802

Answers (1)

Sam Zhai
Sam Zhai

Reputation: 71

I can confirm taht the webkit scrollbar totally works for me in electron with the most basic template. try this?

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);
}

Upvotes: 7

Related Questions