- From: Adam Argyle via GitHub <sysbot+gh@w3.org>
- Date: Tue, 25 Jan 2022 20:33:37 +0000
- To: public-css-archive@w3.org
argyleink has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-scroll-snap] Proposing `:snapped`: exposing private snapped item browser state for developers and designers ==
📄 [Explainer](https://github.com/argyleink/ScrollSnapExplainers/blob/main/css-snap-target/readme.md)
Currently, [IntersectionObserver](https://snap-gallery.netlify.app/horizontal/target/) and or [hacks](https://snap-gallery.netlify.app/horizontal/smart/) (like making gap `100vmin` in a frame so JS can check to see which element is still within the viewport..) are ways to try and derive this, but it's not usually performant, timed properly or accurate. This proposal seeks to remove the hacks and inaccurate algorithms. The browser has an item target it snapped to, developers should have access to that element.
<br>
For example, it's nice to outline the snapped element to help reinforce the state of the scroller:
```css
:snapped-inline {
outline: 3px solid hotpink;
}
```
<br>
or to lift a snapped header when snapped:
```css
section:snapped-y > header {
box-shadow: 0 .5em 1em .5em lch(5% 5% 200);
}
```
<br>
There's a lot more use cases and details about the proposal (cyclical resolution, full set of pseudo selectors, etc) in the [Explainer](https://github.com/argyleink/ScrollSnapExplainers/blob/main/css-snap-target/readme.md)
Related: #5979
Would love to present the details of the explainer to the CSSWG for feedback 🙂
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6985 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 25 January 2022 20:33:39 UTC