Snap Events allow developers reliably listen for when the "snap target" of a scroller changes and perform style adjustments as desired. CSS scroll snap points are often used as a mechanism to create scroll interactive "selection" components, where selection is determined with javascript intersection observers and a scroll end guestimate. By creating built-in events, the invisible state will become actionable, at the right time, and always correct. This feature adds two JavaScript events: scrollsnapchange and scrollsnapchanging. Scrollsnapchange lets developers know, at the completion of a scroll operation (including snapping), that the element to which a scroller is snapped has changed. Scrollsnapchanging gives developers a hint, during a scroll operation, that the user agent intends to snap the scroll container to a new snap target based on the scrolling input so far.
scrollsnapchange gives developers a signal about a change of snap targets resulting from a completed scroll operations. scrollsnapchanging gives developers a signal about the change of snap targets that will result from an ongoing scroll, allowing them create user interfaces that are more engaging for users interacting with scroll containers which snap.
Explainers: https://github.com/DavMila/ScrollSnapExplainers/tree/update/js-snapChanged