📄 Explainer

Currently, IntersectionObserver and or hacks (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.

For example, it's nice to outline the snapped element to help reinforce the state of the scroller:

:snapped-inline {
  outline: 3px solid hotpink;
}

or to lift a snapped header when snapped:

section:snapped-y > header {
  box-shadow: 0 .5em 1em .5em lch(5% 5% 200);
}

There's a lot more use cases and details about the proposal (cyclical resolution, full set of pseudo selectors, etc) in the Explainer

Related: #5979

Would love to present the details of the explainer to the CSSWG for feedback 🙂