Re: [csswg-drafts] [css-env-2] env(scrollbar-inline-size) (#4691)

I still have a use-case and that is when making elements horizontally break out from their parent elements, extending them back to the full available viewable area:

```css
:root {
  overflow-x: hidden;
  overflow-y: scroll; /* could also be done with scroll-gutter */
}

.outer {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}

.inner {
  width: 100vw;
  margin-inline: calc((100vw - 100%) / -2);
}
```

To my knowledge, this is still the way to go to do these types of things when you work with components and you don't know  in what type of element the `.inner` element will end up living (the [alternative approaches using CSS Grid](https://css-tricks.com/full-width-elements-by-using-edge-to-edge-grid/) don't work well with componentization or rely on subgrid).

But `.inner` element will now extend below the scrollbar of the root, creating horizontal overflow. This can again be countered / hidden by setting `overflow-x: hidden`. Problem is, you can still scroll programmatically. This gets apparent, once you start scrolling things like sliders or galleries via `scrollIntoView()` from left to right and then back again.

Here is a demo of that behavior: https://codepen.io/Schepp/full/jOYdQbv
Note how the page jumps horizontally every time you click on "< start" and "end >" in the slider controls (except for the very first time)

Trying to contain scrolling with `overscroll-behavior: contain;` doens't work either, as this works from inside out, but `scrollIntoView()` approaches the task from outside in.

Having `env(scrollbar-inline-size)` available would enable us to fix that unwanted (programmatic) scrolling by changing our code as follows:

```css
.inner {
  --viewable-area: calc(100vw - env(scrollbar-inline-size));
  width: var(--viewable-area, 100vw);
  margin-inline: calc((var(--viewable-area, 100vw) - 100%) / -2);
}
```

-- 
GitHub Notification of comment by Schepp
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4691#issuecomment-1103694891 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 20 April 2022 09:27:48 UTC