How to mod webpage scrollbar with custom.css?

[dude99]

Is that possible? The best i got is this:

/* scrollbar */
#browser ::-webkit-scrollbar { width: 8px; }
#browser ::-webkit-scrollbar-thumb { background-color: var(--colorAccentBg); }
#browser ::-webkit-scrollbar-thumb:hover { background-color: var(--colorHighlightBg); }

But it only work on browser GUI scrollbar, not those scrollbars in the webpage.
Anyone know how to do it, if possible using custom.css?

Thanks.

[Hadden89]

Easy way: userstyles addon (like stylus)
"Hard" but better way: unpacked extension
You don't need #browser for theming webpages scrollbars and vivaldi var colors won't work for them.

[luetage]

@Hadden89 is right, you need to make 2 modifications to accomplish this. I would do the second one as a userscript, because they are less resource heavy than extensions.

[dude99]

@luetage Hi all, Thanks for the reply.

So, it's really not possible to use custom.css with VivaldiHook? I used to mod an extension to get it done, but then i lost it after the google chrome blacklist incident a few days ago. Thus, i wonder if i can just use one custom.css to fix 'em all, cuz t's easier to maintain all mod in one place.

Thanks.

[luetage]

@dude99 One modification is on the application level, the other one on website level. That's 2 different things, but you already accomplished the harder one of the two.

And I don't know if VivaldiHooks even works these days. It's currently not maintained.

[dude99]

@luetage Oh... So it's not possible.

Then how about using user filter?

I found a lot of .css file in: C:\Users\User\AppData\Local\Vivaldi\Application\1.12.955.48\resources\vivaldi\user_files

Can i add the custom scrollbar.css into that folder & enabled it globally?
Will that be more resources friendly than extension/userscript?

EDIT: Vivaldihook still works, but all preload mods are outdated, not very functional. I mainly use it just for the custom.css.

[luetage]

You explained the issue in your first post. Any scrollbar modification from the app level will only change the scrollbars on Vivaldi's internal sites, not the general web. For this you need a dedicated userscript or extension, I don't think there's a way around it. And yeah, you can try to mess with the user files, but a userscript should be the cleaner way to accomplish this.

[dude99]

@luetage
I just tried that. And it kinda works, but it's so broken that it's not worth the effort at all. Then I search the web & apparently that's a bug in all chromium browser.

[dude99]

Here are some nice alternative i found:

userjs: 窄边滚动条 (Narrow Scrollbar)

extension:
Scroll Style Show scrollbar only when needed, colorful

https://chrome.google.com/webstore/detail/subtle-scrollbars/iepofmbkhfelkphdhkldbiemijmgcmlc lightweight gray color

https://chrome.google.com/webstore/detail/scrollbar-diet/cacpdhkipimgfbkcdnkimkekjpfimabb lightweight bright color

[iAN CooG]

@dude99 said in [HELP] How to mod webpage scrollbar with custom.css?:

extension:
Scroll Style Show scrollbar only when needed

try this
vivaldi://flags/#overlay-scrollbars

[sjudenim]

@dude99

Have you tried the "experimental" overlay scrollbar? You can enable it here vivaldi://flags/#overlay-scrollbars . It works quite well now.

[dude99]

Hi guys, thanks for the tip. I'm testing it now, the scrollbar just gone...

I think it doesn't work as expected, maybe im doing something wrong?
Anyway, what's is this means?

Overlay Scrollbars Windows, Linux, Chrome OS
Enable the experimental overlay scrollbars implementation. You must also enable threaded compositing to have the scrollbars animate.

Thanks for helping.

[dude99]

Oh... So it's not even a hidden option?
I look for it everywhere & nowhere to be found.
Will try & see how it works, thanks buddy.

[Narsis]

Does anyone happen to know how to style the overlay scrollbar?