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

@simevidas yes, I would want the element to then take up the full space up to the right edge of the browser.

I think what I mean with scrollbar size is how much in-flow space it takes up. A lot of scrollbars just overlay the underlying content, only appearing when triggered, and would then result in the `env` having the value `0`.

Here is the code I currently have to use to find out myself and fix my problems:

```js
// the following gets all executed right after opening <body> tag
const elem = document.createElement('div');
const referenceElem = document.createElement('div');
const measureElem = document.createElement('div');

Object.assign(elem.style, {
  position: 'absolute',
  width: '100%',
  visibility: 'hidden',
});
Object.assign(referenceElem.style, {
  overflow: 'scroll',
  width: '50px',
});

const determineWidth = () => {
  const scrollbarInlineSize = 50 - measureElem.offsetWidth;

  window.sessionStorage.set('scrollbar-inline-size', scrollbarInlineSize);
  document.documentElement.style.setProperty('--scrollbar-inline-size', `${scrollbarInlineSize}px`);
};

elem.appendChild(referenceElem);
referenceElem.appendChild(measureElem);
document.body.appendChild(elem);

const scrollbarInlineSize = window.sessionStorage.get('scrollbar-inline-size');

if (scrollbarInlineSize !== null) {
  document.documentElement.style.setProperty('--scrollbar-inline-size', `${scrollbarInlineSize}px`);
} else {
  window.requestAnimationFrame(() => determineWidth);
}

``` 

(imagine a little more complexity to it and this being the gist)

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


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

Received on Monday, 11 September 2023 06:41:07 UTC