- From: Christopher Kirk-Nielsen via GitHub <noreply@w3.org>
- Date: Tue, 07 Oct 2025 03:41:19 +0000
- To: public-css-archive@w3.org
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