Style scrollbar

[oudstand]

Hey, is it possible to style the browsers scrollbar with a CSS mod or do I have to use a Extension for this?
I only found a 6 years old topic to this.

[dude99]

@oudstand Yes u can. Just apply it like usual CSS with correct syntax.

references:
https://www.youtube.com/watch?v=lvKK2fs6h4I
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
https://css-tricks.com/custom-scrollbars-in-webkit/
https://css-tricks.com/almanac/properties/s/scrollbar/

One special syntax Vivaldi have is they use global value --scrollbarWidth to control scrollbar width:

::-webkit-scrollbar {--scrollbarWidth: 12px;}

---

Then you can add highlight effects on all scrollbar when mouseover the empty track sections:

::-webkit-scrollbar-track-piece:start:hover {background-image: repeating-linear-gradient(-45deg, var(--colorHighlightBgAlpha) 0 .7%, transparent 0 1.5%), repeating-linear-gradient(-45deg, var(--colorHighlightBgAlpha) 0 .7%, transparent 0 1.5%);}
::-webkit-scrollbar-track-piece:end:hover {background-image: repeating-linear-gradient(45deg, var(--colorHighlightBgAlpha) 0 .7%, transparent 0 1.5%), repeating-linear-gradient(45deg, var(--colorHighlightBgAlpha) 0 .7%, transparent 0 1.5%);}

---

You can setup each section of the browser GUI to have different scrollbar, you just need to add .elementClassName before ::-webkit-scrollbar to overwrite it's scrollbar style.

For example I can give vertical tabbar scrollbar lesser width, & expanded the scrollbar thumb on hover with this, & it won't affect other scrollbar in other GUI:

#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar {--scrollbarWidth: 8px !important;}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb {border-width: 2.5px !important;}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb:hover {border-width: 2px !important;}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb:active {border-width: 1px !important;}
#tabs-tabbar-container:is(.left, .right) > div:not(:focus-within):not(:hover) .tab-strip::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.3)}
.maximized.tabs-left #tabs-tabbar-container > div.overflow:not(:focus-within):not(:hover) .tab-strip::-webkit-scrollbar-thumb {border-left-width: 1px !important; border-right-width: 3px !important; border-radius: 2.5px 5px 5px 2.5px !important;}

Hope this is helpful to u.

[oudstand]

@dude99 Thanks for your help. Somehow my changes have no effect. If I add to my .css file

::-webkit-scrollbar {
    --scrollbarWidth: 120px !important;
}

I would expect, that I have really big scroll bars, but noting happens.

[luetage]

@oudstand Do you want to change internal scrollbars or web page scrollbars? It sounds like you want to change web page ones, but you are posting in the modifications section.

[oudstand]

@luetage I tried to change all scrollbars including the scrollbars of webpages. I thought because I want a unique look across all webpages, the modifications section would be the right place.

[dude99]

@oudstand for webpage's scrollbar, you will need extension that inject CSS code into the webpage. Stylus is the most popular one.

[oudstand]

Ah okay, then it's not done with plain CSS. Thanks for your help @dude99 @luetage

[Streptococcus]

I see first the operating system scrollbar, then my modified scrollbar. Why does it take a second to change the scrollbar in the content to my modified version? Why are the ends of the thumbs rounded, with essentially the same settings, in the interface but not in the content?
I am using the extension Custom Stylesheet Script for the content.

[nomadic]

@Streptococcus

Why does it take a second to change the scrollbar in the content to my modified version?

Check the settings of the extension. If it doesn't load with the page, there might be some setting that is causing the CSS to be added after the page has finished loading. Look for the words "document_end".

My first attempt at writing a browser extension was a scrollbar customization, which I still use today, and it shows up immediately on page load. https://github.com/ortiza5/slim-scroll-bar

Why are the ends of the thumbs rounded

There is probably a bit of CSS active that is causing that. You can control it with something like this:

::-webkit-scrollbar-thumb {
  border-radius: 0px;
}

[Streptococcus]

@nomadic
I am pretty sure that the stylesheet stored by the extension is loaded last. Other settings in there were overriding page code even when I only wanted to set a default, not an override. Where would I find "document_end"? There is nothing but headings in the options page.

[dude99]

@Streptococcus That extension is old & no longer update since 2019, I suggest u get a newer extension that support preload CSS function.