Future of CSS: Scrollbars

Before I even start I'll say this really is not for any projects, this is from the first public working draft and has close to 0% browser support. You may wonder why I've bothered turning it into a blog post, well it's because the more people that show interest the sooner we may see it in browsers.

Publication as a First Public Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

There have been 2 new CSS properties proposed scrollbar-color and scrollbar-width. Both of them are in the CSS Scrollbars Module Level 1 document which was released in September 2018 but, of course, we'll head over the Mozilla's dev site to get a better understanding.

scrollbar-color

Let's head over to the scrollbar-color page first and see what Mozilla have to say.

The scrollbar-color CSS property sets the color of the scrollbar track and thumb.

The track refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position.

The thumb refers to the moving part of the scrollbar, which usually floats on top of the track.

scrollbar-color accepts 4 inputs auto, dark, light and <color> <color> they are described as follows.

auto
Default platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties.

dark
Show a dark scrollbar, which can be either a dark variant of scrollbar provided by the platform, or a custom scrollbar with dark colors.

light
Show a light scrollbar, which can be either a light variant of scrollbar provided by the platform, or a custom scrollbar with light colors.

<color> <color>
Applies the first color to the scrollbar thumb, the second to the scrollbar track.

:root {
  scrollbar-color: #111 #333;
  height: 200vh;
}

If you happened to be using FireFox version 64 on Windows or Linux that would have worked for you, if not here's a screenshot.

Currently, custom colors work but auto, dark and light all leave the scrollbar as default.

scrollbar-width

Now we'll move on to scrollbar-width

The scrollbar-width property allows the author to set the maximum thickness of an element’s scrollbars when they are shown.

This time we only get 3 possible inputs auto, thin and none. They're described like so

auto
The default scrollbar width for the platform.

thin
A thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width.

none
No scrollbar shown, however the element will still be scrollable.

:root {
  scrollbar-width: thin;
  height: 200vh;
}

Again, FireFox is required so here's what it would look like.

Both together

:root {
  scrollbar-color: #111 #333;
  scrollbar-width: thin;
  height: 200vh;
}

Wrapping up

I'll reiterate that this is not ready for production but it's interesting to see where our little platform is heading. If you enjoy this format please let me know and if you have any ideas about what I can cover next I'd love to hear them.

Thanks for reading ❤🦄❤❤🦄🦄🦄❤

Comments

[Krisztian Kecskes]

I hope we'll have a solution that can work on all browser one day...

[Andrew Bone]

With it, potentially, going into the spec we'll see it everywhere eventually 🙂

[Basti Ortiz]

Yes! We need more of this in CSS. Gone must be the days of using poorly supported vendor-specific pseudo-elements to style scrollbars. I am definitely excited to see this feature finalized.