Future of CSS: Scrollbars
Tags: css, future, design, scrollbars
Published: 2019-01-07 15:04:07

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`](https://www.w3.org/TR/css-scrollbars-1/#scrollbar-color) and [`scrollbar-width`](https://www.w3.org/TR/css-scrollbars-1/#scrollbar-width). Both of them are in the [CSS Scrollbars Module Level 1](https://www.w3.org/TR/css-scrollbars-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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

```css
:root {
  scrollbar-color: #111 #333;
  height: 200vh;
}
```
{% codesandbox 5yq5q18vjx %}

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.

![Dark Scrollbar](https://thepracticaldev.s3.amazonaws.com/i/14mfewuv88ltyqccvdvi.png)

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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

```css
:root {
  scrollbar-width: thin;
  height: 200vh;
}
```
{% codesandbox rnr1ol2k4 %}

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

![Thin Scrollbar](https://thepracticaldev.s3.amazonaws.com/i/exk8iwgeqq438v48ly0j.png)

## Both together

```css
:root {
  scrollbar-color: #111 #333;
  scrollbar-width: thin;
  height: 200vh;
}
```
{% codesandbox k1mxon4r15%}

![Dark and Thin scrollbar](https://thepracticaldev.s3.amazonaws.com/i/cv34ejlxi1grbxriys12.png)

## 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 ❤🦄❤❤🦄🦄🦄❤