← Back to release summary

Scroll snap for single-axis scroll containers

Category
CSS
Type
New or changed feature
Status
Proposed (Chrome Proposed)
Intent stage
None

WPT details: https://wpt.fyi/results/css/css-scroll-snap

Summary

This feature lets a single-axis scroll container (for example, one with overflow: auto clip) handle scroll snap area propagation and alignment separately for each axis. Single-axis scroll containers are now supported (https://chromestatus.com/feature/5067363861004288). Without this feature, such a container captures a snap area on both axes, even the axis it can't scroll. The snap area then can't align on that axis. With this feature, if a snap area sets alignment on both axes, the single-axis container handles only the axis it scrolls. The other axis goes up to the nearest ancestor scroll container that scrolls in that direction.

Motivation

This is part of the single-axis scroll container feature (https://github.com/explainers-by-googlers/single-axis-scroll-containers) to align the scroll snap behavior with the sticky header in a single-axis scroll container.

Standards & signals

Ecosystem

Explainers: https://github.com/explainers-by-googlers/single-axis-scroll-snap

View on chromestatus.com