How to customize the Overlay Scrollbar?

[dude99]

I have enabled these scrollbar features:
chrome://flags/#overlay-scrollbars
chrome://flags/#overlay-scrollbars-flash-after-scroll-update
chrome://flags/#overlay-scrollbars-flash-when-mouse-enter

Now I would like to customized the overlay scrollbar width & color to improve it's visibility. Is that possible with just CSS? Or maybe combo with JS?

Thanks.

[LonM]

@dude99

• https://forum.vivaldi.net/post/67668
• https://forum.vivaldi.net/topic/18698/custom-scrollbar-not-applying-to-webpages
• https://forum.vivaldi.net/topic/21914/how-to-mod-webpage-scrollbar-with-custom-css

A quick search brings up these results which should be useful.

[dude99]

@lonm Thanks for the suggestions. I have search but got no topic or answer to customize the OVERLAY SCROLLBAR. I know how to mod the normal scrollbar, but not the Google Chrome's overlay scrollbar.

Thus, I open this topic in hope to find a solution.
Thanks.

[LonM]

@dude99 if I'm remembering correctly, you should be able to see it in the same way. If not then you might just have to make your own overlay scrollbars by customizing the regular scrollbars.

[dude99]

@lonm Yes, i can see the overlay scrollbar when it's enabled. But the problem is the scrollbar color is semi-transparent BLACK - this color is invisible in dark background.

I want to change the color to GRAY or something easier to see on both light & dark background. Then, the width can be slightly thinker when it's not expanded. Previously i use custom "floating" scrollbar, but it's kinda laggy because of the heavy js it use to animate the scrollbar. So i decided to use Chrome Overlay scrollbar.

[LonM]

@dude99 Having just tried it myself, it looks as though styles are not applied to the overlay scrollbar. I.e.

::-webkit-scrollbar-thumb:vertical {
    background-color: yellow !important;
}

does not work.
I can't think of another way to force this, it may not be possible.

[sjudenim]

@dude99

Those codes that @LonM linked to don't actually work as an overlay in spite of them using a transparent track. You can fix that by adding,

html {
    width: 100vw
}

But it seems as if the track is made to be part of the page because using the above code adds a horizontal scrollbar meaning that the page is out of view. It's strange. It might be possible to use an overflow somewhere and adjust position though.

As for modding the built-in overlay, I think it's still just a Chromium element and not part of the Vivaldi UI but it works fine for me, it changes to a light grey on dark pages so I'm not sure why your isn't adapting. This was changed many Chromium versions ago.

[dude99]

@sjudenim said in How to customize the Overlay Scrollbar?:

As for modding the built-in overlay, I think it's still just a Chromium element and not part of the Vivaldi UI but it works fine for me, it changes to a light grey on dark pages so I'm not sure why your isn't adapting. This was changed many Chromium versions ago.

Hmm, now you mention it i do see it change to gray sometimes. However not all the time, i guess maybe they didn't perfected the webpages' background color detection yet... It's a experiment feature after all.

[sjudenim]

@dude99

After I had posted that I noticed the scroll thumb staying dark with a light border, then other times on the same page it would be all light grey. Still a work in progress, as you say.