Re: [csswg-drafts] [css-position-3] Making a stickypos in a scroller also see the viewport edges (#8286)

Here's a crazy random thought, what about creating a new prop which targets the scrolling container and tells it how to treat descendant sticky elements. For example;

_Here's some old example boilerplate first so everyone is on the same page._
```
<div class="table-wrapper">
    <table>
        <tr><th>Foo</th><th>Bar</th></tr>
        <tr><td>sin</td><td>cos</td></tr>
        <tr><td>tan</td><td>baz</td></tr>
        ...
    </table>
</div>
```

```
.table-wrapper {
    overflow-x: auto;
}

th {
    position: sticky;
    top: 0;
}
```

My thought was if we create a new prop (name is example only) like `sticky | sticky-x | sticky-y`. We could then do something like;

```
.table-wrapper {
    overflow-x: auto;
    sticky-y: inherit | initial | unset | none | ignore
}
```

`none` -> this scrollable container will not allow child sticky elements to work.
`ignore` -> this scrollable container will be excluded from the "nearest scrolling ancestor" lookup. This would mean table row headers could stick to the viewport top:0 and column headers could stick to the scrollable container left:0


It's not as nice as targeted sticky behaviour, however this allows the default sticky behaviour to function as is, but allow developers the ability to declare how their scrollable containers affect descendant sticky elements.




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


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

Received on Monday, 20 November 2023 02:11:12 UTC