customizing scroll bars?

[morrysillusion]

ive been a bit slow on my website coding lately but, as ive been planning a new shrine page i realized i really wanted to make all elements immersive, and one thing ive failed to figure out it... custom scroll bar. if this something that can be changed just with html/css? or do i need to do a bit more?

ive had a weirdly hard time finding concrete answers about this that can keep my code as simple as possible, tbh. so im not entirely sure how it works to change that. any links or explanations appreciated! again id like to keep things simple but, dont mind having to use a bit of javascript if thats where this goes.

when i customaizing, i mean: changing the color mainly. but being able to change the shape, width, etc too.

[Melooon]

Ok so I only recently figured this out by snooping cinnis code and mixing it with old code from my site

You need to do it differently for Firefox and Chrome/Safari! Here is the code from my site:

Code

/* Scrollbar styles */
/* Firefox */
* {
  scrollbar-color: #cd7c00 #000020;
}

/* Chrome + Safari */
::-webkit-scrollbar {
  background: #000020;
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #000020;
}

::-webkit-scrollbar-thumb {
  background: #cd7c00;
  border-radius: 10px;
}

On the Firefox version the first colour is the bit you drag and the second colour is the background; note the * will make it chnage EVERYTHING that can scroll, if you only want to change the body scroll or scrolls within iframes you can change * to "body" or "iframe" etc
The Chrome/Safari version has WAY more options, you can do some really intense customisation on it, but at its simplest, the first 2 affect the background and the thumb is the bit you drag!

Documentation for Firefox version: https://css-tricks.com/almanac/properties/s/scrollbar-color/
Documentation for Chrome version: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar (Im aware the irony that this is the Mozilla documentation :omg:k:smile:

I know this is a bit clunky and MAYBE there is a better way to do it, but Iv not found one, if anyone knows better please correct me!

[morrysillusion]

thank you very much! i seemed to hear there was a difference for browsers too but some pages just said firefox flat out didnt work at all-- i will def take a look at this and try it out!

[IndigoGolem]

That's pretty cool. My everyday browser supports this and i never noticed until now that the scroll bar is purple here.

It doesn't work in Dillo or NetSurf with their different rendering engines and limited CSS support, nor in CSS-less browsers like Alhena and Links2. It's great in Vivaldi and LibreWolf though.

[tanuki]

Code

/* Scrollbar styles */
/* Firefox */
* {
  scrollbar-color: #cd7c00 #000020;
}

/* Chrome + Safari */
::-webkit-scrollbar {
  background: #000020;
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #000020;
}

::-webkit-scrollbar-thumb {
  background: #cd7c00;
  border-radius: 10px;
}

I've totally stolen this for my own site (gave you kudos & linked to this post) 

This is such an easy way to make your site stand out from others, and add to your sites aesthetic, or at least prevent the boring, default grey scrollbars from ruining the immersion of your readers (This would be great to add if you had a web-comic).

Does anyone know a reason why this isn't done by many other "large" sites? Is it due to accessibility?