Autoprefixer cannot generate prefix for custom scrollbar

[sarazhang123]

I use grunt-postcss to generate css prefix.

Configuration as follows:

processors: [
   require('autoprefixer') {
      browsers: [
        '> 0.04%'
      ]
    }
]

Sass as follows:

@mixin custom-scroll($thumb-bgcolor: $gray-background-color, $track-bgcolor: $white-background-color) {
  &::scrollbar {
    background-color: transparent;
    width: 5px;
    height: 5px;
  }

  &::scrollbar-thumb {
    background: $thumb-bgcolor;
    border-radius: 2px;
    min-height: 6px;
    width: 4px;
  }

  &::scrollbar-track {
    background: $track-bgcolor;
    border-radius: 2px;
  }
}

But, autoprefixer cannot generate prefix for scrollbar-xxx, such as -webkit-scrollbar, -webkit-scrollbar-thumb, -webkit-scrollbar-track. It is a bug or it is my wrong configuration?

[ai]

There is no W3C spec for it. So we don't know how unprefixed selectors will looks like.

[jonaskuske]

There now is a Working Draft for this specification and it shipped in Firefox 64, here's the relevant MDN page: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Only supports scrollbar width and color of the track and the thumb for now.

So we might want to explore this topic again – shall we open a new issue for this? (or reopen this one?)

[ai]

@jonaskuske sure. I need:

1. PR to Can I Use with support data.
2. Table of unprefixed to prefixed selectors.

[jonaskuske]

@ai In which format should that table be?

[ai]

@jonaskuske just post comment in this issue with official selector → webkit selector

[sylvainpolletvillard]

for information, there is ongoing work on this here : https://github.com/pascalduez/postcss-scrollbar

[Malvoz]

@ai

I need:

1. PR to Can I Use with support data.

https://caniuse.com/#feat=css-scrollbar https://github.com/Fyrd/caniuse/blob/master/features-json/css-scrollbar.json

---

2. Table of unprefixed to prefixed selectors.

This is the longest standing open issue. How do you feel about if we start this off small and simple to address the (probably [1]) most common use case: hiding scrollbars while keeping overflowing containers scrollable? If yes we could open a separate issue for this.

[1] Comparison "hiding scrollbars while scrollable" has more than double the views than "customizing scrollbars": https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll https://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div

Based on: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Hiding scrollbars (while keeping them scrollable)

/* input */

.selector {
  scrollbar-width: none;
}

/* output */

.selector::-webkit-scrollbar {
  display: none;
}

.selector {
  -ms-overflow-style: none;
     scrollbar-width: none;
}

Resetting scrollbars to their defaults

/* input */

.selector {
  scrollbar-width: auto;
}

/* output */

.selector::-webkit-scrollbar {
  display: initial;
}

.selector {
  -ms-overflow-style: auto;
     scrollbar-width: auto;
}

Notes on the examples:

• ::-webkit-scrollbar doesn't have designated properties, so developers wanting to hide this could do width: 0; height: 0; or visibility: hidden instead of display: none so I'm not sure how you would deal with that.
• I didn't include scrollbar-width: thin as it doesn't have any corresponding vendor-specific styles. It could perhaps map to the output of the "Resetting scrollbars" example as it does indicate the presence of scrollbars.

[ai]

@Malvoz my current worries:

1. The current architecture doesn’t fit creating independent rules from properties. We will need to write complex hacks as we did for Grid.
2. Hiding scroll bar doesn’t look like a very popular use case.
3. I got small community feedback for the latest Autoprefixer news, it is not great for motivation. As a result, I am focusing on different fields right now.

Because of these reasons, I do not want to do it on my own. But I will help you make a pull request and will accept and release it.

[pascalduez]

From my experience with postcss-scrollbar and also custom overrides that we have in production now, we might need/want this to be quite configurable. For instance styling or hiding in OSX makes less sense, since they already have "nice", "hoverable" scrollbars (depending) on user config. This user config is not readable from a browser, as far as I know.
Also the system defined width applied to the thin keyword is not readable/retrievable, so we make lots of guessing at the end.

[jonathangraf]

Will this be postponed until browser-support is better? Or is this stale?