[mediaqueries-5] scrollbar-type and prefers-scrollbar-type

[bmathwig]

With more user agents implementing overlay-style scrollbars, it's been clear that there is a site compatibility issue that emerges when content or interactive elements are obscured by elements of the scrollbar. To make things more complicated, users have the option to toggle between overlay scrollbars and classic scrollbars via the "Always show scrollbars" operating system settings. This means a page author cannot correctly determine the best course of action to prevent interactive elements from becoming non-interactable.

To help alleviate this issue, I propose adding two new @media descriptors:

@media (scrollbar-type: overlay | classic) { ... }
This query will allow a page author to adjust padding and margins on content that would otherwise be obscured by an overlay scrollbar, but would be just fine with a classic scrollbar. A scrollbar-type can potentially be changed via a future extension to css-scrollbars-1 (#7421).

@media (prefers-scrollbar-type: overlay | classic) { ... }
This query represents the preferred scrollbar type of the user and what they've set in their user preferences.

[bmathwig]

Pinging this thread.

There is some interest in exposing this information via CSS as filed under a Chromium Bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=1012117#c13

[tabatkins]

The scenarios you mention are what 'scrollbar-gutter' is designed to solve. In particular, if you want to avoid placing content underneath an overlay scrollbar, scrollbar-gutter: always; should do the job, ensuring that some space is reserved for the overlay scrollbar to live in.

Do you know if this is insufficient for any use-cases you're worried about?

[bmathwig]

Such a scenario would be moving a single element away from the margin while keeping the overlay of content intact on the containing block; no gutter.

It's insufficient in that scrollbar-gutter: stable does not reserve space for overlay scrollbars (per https://w3c.github.io/csswg-drafts/css-overflow/#overlay-scrollbars). If css-overflow-4 is going to solve it with scrollbar-gutter: always, then we should get consensus on that. Though, I do believe the more 'passive detection' approach would be better than a pro-active always approach.

[tabatkins]

Oh lol we changed the value from its definition in the /TR spec, ok.

Then yeah, we should have some ability to detect this, definitely.

You seem to be suggesting two separate MQs - what difference do you see between the two in usage?

[bmathwig]

If we decide to skip scrollbar-mode in #7421, we won't need scrollbar-type. The only one we'd need is prefers-scrollbar-type which is the preference setting in the OS or the Browser appearance settings.