CSS Scrollbars!

Off-topic
1

Firefox now with the newest revision has preliminary support for the new CSS Scrollbars currently in draft status. I’ve just modified my blog theme to take advantage of this. Unfortunately setting the track to transparent also removes the arrows from the buttons at this time, but you can open up the developer tools and add these CSS rules to see how much nicer this looks right here on the forum:

html {scrollbar-color: #727272 #1e2443;} textarea, .d-editor-preview-wrapper, p > code, li > code, pre > code {scrollbar-width: thin;}

I’m sure there’s other scrolling elements that could be modified as well, that’s just a quick example. There are plenty of other sites to experiment with if you have Stylus, but I’m mostly interested to hear from other webmasters - will you be adding customised scrollbars any time soon? A word of warning though, the implementation is buggy.

Interestingly the brightest you can make the scrollbar thumb if you’re wanting the accent to be bright and not dark is #757575 or rgb(117, 117, 117). It’s also the brightest you can make the track if you want white arrows instead of black. But that value seems odd since the logical threshold would be #7f7f7f / rgb(127, 127, 127), so I don’t expect other browsers to be consistent once they start implementing CSS scrollbar support.

1 Like
2

I haven’t heard of this yet. Not something I would prioritise but interesting nonetheless.

And it’s a good thing if it prevents people from using custom scrollbar implementations which may not work properly (especially with keyboard or touch controls).

P.S.: Stylus is AWESOME!

3

I have described the bugs over on Whrilpool (and my blog). If you’re careful you can absolutely make use of it, and they look fantastic on dark-theme sites in particular. I wouldn’t recommend using them on light-theme sites other than the thin scrollbar, and I would only advise using that if you understand the bug I described (it seems you must explicitly specify a css overflow value for the element you want a thin scrollbar on otherwise you get an invisible scrollbar instead). At this point the really big unknown is how it will be implemented on other browsers, the last thing we need is CSS that works fine on one browser but causes problems on others.

Still I am loving it, the neat little thin scrollbar is lovely:

EmlnviF.png745×300 15.7 KB

P.S.: Chrome SUCKS!!