CSS Scrollbars

An issue we’ve heard from authors is that they want to know what scrollbars are doing and respond to that.

There’s a bunch of issues that might go hand in hand to actually solve this:

¹ Expose an env() variable that allows you to get the scrollbar-size. This is a fixed value, independent of whether a scrollbar is shown or not – it just gives you back the size
² A way to query which type of scrollbars are being used on the page.
A container state query to be able to know if something is overflowing or not

If you combine these three, authors can do things like:

@media (scrollbar-type: classic) {
    @container (state: has-overflow) {
        .thing {
            width: calc(50vw - env(scrollbar-size));
        }
    }
}

These first 2 things were also one of the outcomes of last year’s Interop2022 Viewport Investigation Effort ³, suggesting to request these at the CSS WG.

Related to scrolling, but not to this subject, is authors often wanting to need to know which direction a scroller is scrolling in ⁴. Maybe be relevant to take into account during this discussion, but most likely not.

bramus/css-scrollbars.md

Footnotes