Re: [csswg-drafts] Proposal: `scrollbar-offset` property (#12385)

This is pretty close to something I've needed the past few weeks. I was basically thinking of `scrollbar-margin` but `scrollbar-offset` (or `inset`?) seems like a better name.

My use-case is not to account for cut-off boxes, though it is definitely more valid than mine. I was thinking more so for art direction. It seems common enough for me to receive designs from my team (or indeed, from my own brain) where a full-bleed section has a scrollbar only taking up a certain amount of the available space.

If you have a 1000px container, you could fade out 100px on each side with a `mask`, and have a fully opaque center section of 800px. With a new property, the scrollbar would follow that too, being 800px wide. It looks a little cleaner and intuitive. The masked parts are kind of "outside" the focus area, so limiting the scrollbar does make some sense, too. (note that I know you can layer the mask to ensure the scrollbar area is always 100% opaque edge-to-edge but that's not what I am after)

```css
/* Scrollbar starts and ends 100px from the edge of its current axis */
.scrollable { scrollbar-offset: 100px; }

/* Scrollbar starts 100px from the starting edge of its current axis, the other side is stuck against it */
.scrollable { scrollbar-offset: 100px 0; }

/* Scrollbars, plural, are respectively offset 100px from the top for the vertical scrollbar, and 50px from the left for the horizontal scrollbar */
.scrollable { scrollbar-offset: 100px 0 / 0 50px; }

/* Totally unreasonable but technically should be possible */
.scrollable { scrollbar-offset: 10% calc(5vw - 1em); }
```

I rambled about this [idea on Mastodon](https://front-end.social/@chriskirknielsen/115324939358008958), and then found this here issue, so instead of creating another one, I figured I'd share. Here is the [interactive demo showcasing what I wish we could accomplish](https://codepen.io/chriskirknielsen/pen/pvgezLy). Video recording of the example is below.

Some notes:
- It would also be possible to offset both axes if a container has overflow in both axes. That seems like a rare, but possible scenario. Should authors have control, or should both scrollbars, in that case, just take up 100% of their axis? I don't know if the square at the meeting point of both scrollbars is essential (outside of the main viewport itself).
- Maybe this would be forbidden for the root element, to avoid messing up the trusty scrollbar (though you can already do some serious damage with a transparent scrollbar color or a width of none).
- Speaking of, this seems very easy to mess up, accessibility-wise, with something like `scrollbar-offset: 50%` which would effectively make it 0px, since it would eat 50% on each side. Not sure if it should be allowed and rely on authors being careful about it, or force a minimum of 50% of the total container size in the current axis?


https://github.com/user-attachments/assets/b92c0f0e-1a44-4c61-921d-d90c2f68647c

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


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

Received on Tuesday, 7 October 2025 03:41:19 UTC