Skip to content

Instantly share code, notes, and snippets.

@bramus
Created July 20, 2023 20:44
Show Gist options
  • Save bramus/bcca5788d8ced82837180b7a15760c84 to your computer and use it in GitHub Desktop.
Save bramus/bcca5788d8ced82837180b7a15760c84 to your computer and use it in GitHub Desktop.
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:

  1. 1 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
  2. 2 A way to query which type of scrollbars are being used on the page.
  3. 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 3, 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 4. Maybe be relevant to take into account during this discussion, but most likely not.

Footnotes

  1. https://github.com/w3c/csswg-drafts/issues/4691

  2. https://github.com/w3c/csswg-drafts/issues/7697#issuecomment-1314481766

  3. https://github.com/web-platform-tests/interop-2022-viewport/issues/15#issuecomment-1268596477

  4. https://github.com/w3c/csswg-drafts/issues/6400#issuecomment-1439063168

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment