Automate Extra Thicc Overlay Scrollbar

[dude99]

RIP Overlay Scrollbar, we will miss you very much... or not!

Here is a CSS mod to kinda bring the overlay scrollbar back from the grave. It's far from perfect, but that's all I can do for now because of the limited scrollbar customization Chromium is supporting. And I made the scrollbar extra thicc when you need it, while keep it semi-invisible during normal browsing.

html {overflow: overlay !important;}

::-webkit-scrollbar{background:transparent;}
::-webkit-scrollbar:hover {background: #8882; width: 1.9vmax; height: 1.9vmax;} 

::-webkit-scrollbar-thumb {border: .5px solid  #fff8; background-color: #8888; border-radius: 1px; min-height: 2.2rem;}
::-webkit-scrollbar-thumb:hover {border: .5px solid #fffa; background-color: #888d;}
::-webkit-scrollbar-thumb:active {border: 1px solid yellow; background-color: gold;}

Instructions:

1. First, You will need to install CSS manager/editor extension, like Stylus to apply this CSS mod to webpages.

2. Then, create a new CSS mod with above code, change URL/domain option to Everything by click on "-" button. Click Save to apply.

3. If you did it correctly, the CSS mod will add an Automate Extra Thicc Overlay Scrollbar to all webpage.

4. I use vmax for both scrollbar width & height because I hate the effect of page zooming on scrollbar. But now the scrollbar thiccness will be affected by window size instead. You can change 'em to something else like px, rem, or whatever you want, but then the page zoom will change the scrollbar's thinccness. LOL

Now I'm sure some of you have some fantastic scrollbar CSS mod to share with us. Please don't be shy & let's turn this thread into a custom scrollbar gallery!

[dude99]

Introducing Extra Thicc Overlay Scrollbar NEON Edition!!!

html {overflow: overlay !important;}

::-webkit-scrollbar{background:transparent !important; max-width: 6px; max-height: 4px;}
::-webkit-scrollbar:hover {max-width: 25px; max-height: 25px; width: 1.9vmax !important; height: 1.9vmax !important;} 

::-webkit-scrollbar-thumb {background-clip: content-box; background-color: #7778 !important; border-radius: 1px; min-height: 2.2rem;}
::-webkit-scrollbar-thumb:hover {border: .5px solid #fff9; background-color: #888d !important;}
::-webkit-scrollbar-thumb:active {border: 1px solid lightcyan !important; background-color: cyan !important;}

::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece {background: transparent !important;}

::-webkit-scrollbar-track:hover {background: #8881 !important;}

::-webkit-scrollbar-track-piece:hover {background: linear-gradient(transparent, #8883,transparent) !important;}
::-webkit-scrollbar-track-piece:active {background: linear-gradient(transparent, cyan, transparent)  !important;}

Alternate fullbar highlight for active trace-pieces, replace the last line with these code:

::-webkit-scrollbar-track-piece:start:active {background: linear-gradient(cyan 70%, transparent)  !important;}
::-webkit-scrollbar-track-piece:end:active {background: linear-gradient(transparent, cyan 70%)  !important;}

This is slight improvement over above code, now it allow better control of the scrollbar's thickness during thin & thicc mode with max-width, I recommend keep it at least 5.5px for thin mode during window mode. (I'm can't figure out how to make separate scrollbar width for maximized & normal window mode, please share if you know the trick.)

Then, you can change the NEON highlight color cyan to something else: springgreen, magenta, orangered, gold, or whatever color will make you happier. If you don't want too much distraction when scrolling via clicking on the scrollbar track-pieces, u can remove the last line to remove the highlight effect.

That's all for now, have fun!

[dude99]

update for v3.3, improve constant thiccness in various window sizes. You might need to tweak it to fit your screen resolution.

html {overflow: overlay !important; /*scroll-behavior: smooth; */}

::-webkit-scrollbar {background:transparent !important;}
::-webkit-scrollbar:hover {width: 1.3vmax !important; height: 1.3vmax !important;} 

@media (orientation: landscape) and (max-width: 1300px) {
    ::-webkit-scrollbar:hover {width: 1.7vmax !important; height: 1.7vmax !important;} 
    ::-webkit-scrollbar-thumb {border-width: .15vmax !important;}
}

@media (orientation: landscape) and (max-width: 1000px) {
    ::-webkit-scrollbar:hover {width: 2.2vmax !important; height: 2.2vmax !important;} 
}

@media (orientation: landscape) and (max-width: 700px) {
    ::-webkit-scrollbar:hover {width: 3vmax !important; height: 3vmax !important;} 
}

@media (orientation: portrait) {
    ::-webkit-scrollbar:hover {width: 2.5vmax !important; height: 2.5vmax !important;}
    ::-webkit-scrollbar-thumb {border-width: .15vmax !important;}
}

@media (orientation: portrait) and (max-height: 680px) {
    ::-webkit-scrollbar:hover {width: 2.8vmax !important; height: 2.8vmax !important;}
}

::-webkit-scrollbar-thumb {background-color: #8887;  border: .1vmax solid #fff4; border-radius: .1vmax; min-height: 2.2rem;}
::-webkit-scrollbar-thumb:hover {background-color: #888c !important; border-color: #fff9;}
::-webkit-scrollbar-thumb:active {background-color: gold !important; border-color: yellow;}

::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece {background: transparent !important;}

::-webkit-scrollbar-track:hover {background: #8881 !important;}

::-webkit-scrollbar-track-piece:hover {background: linear-gradient(transparent, #8883, transparent) !important;}

::-webkit-scrollbar-track-piece:start:active {background: linear-gradient(gold 65%, transparent)  !important;}
::-webkit-scrollbar-track-piece:end:active {background: linear-gradient(transparent, gold 35%)  !important;}

[element4l]

I'd love for this to work but it just stays the same width, there's no adjustment from small to wide on hover. It does change "style" and color though.

[dude99]

@element4l Sorry, this mod are somewhat broken for awhile. I'm not going to fix it cuz it's not really that good. I'm try to figure out a better way to accomplish similar effect, but don't wait for me.

I suggest you look for scrollbar extensions instead.

[element4l]

@dude99 Alright, thanks. I looked around but I'm actually quite fond of the way this works, just off hand have you used any extensions which reproduce the ability to show the colors or some indication when you click up and down for which direction it's going?

P.s. your mods are great I've been using tons of them! Thank you!

[dude99]

@element4l
any part of the code in this thread with ::-webkit-scrollbar-track :hover or :active will give you the highlight effect when you hover or click on the scrollbar.

Currently, I'm using this, it give shrinking animation effect when you scrolling by holding left button on empty section of scrollbar:

::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece {background: transparent !important;}

::-webkit-scrollbar-track:hover {background: #8881 !important;}

::-webkit-scrollbar-track-piece:hover {background: linear-gradient(transparent, #8883,transparent) !important;}

::-webkit-scrollbar-track-piece:start:active {background: repeating-linear-gradient(45deg, gold 0 1%, transparent 0 2%) !important;}
::-webkit-scrollbar-track-piece:end:active {background: repeating-linear-gradient(-45deg, gold 0 1%, transparent 0 2%) !important;}

::-webkit-scrollbar-corner {display:none;}

The width changing parts are pretty much broken (LOL), I'm still try to find new way to get consistent thicker scrollbar on mouseover that won't affected by page zooming, but I can't find any method yet...