v156 · scroll-snap-type: pair · canonical 2d comparison

Both vs. pair 2D canvas

Card A sits at (40, 260) and Card B sits at (260, 40). With scroll-snap-type: both mandatory, scrolling near the top-left corner snaps X to Card A's 40px and Y to Card B's 40px — landing at the empty phantom coordinate (40, 40). Switching to scroll-snap-type: pair mandatory forces the scroll container to pick a single real element for both axes.

Interactive 2D snap container

scroll-snap-type
Fallback simulator
PHANTOM (40, 40) X from Card A (40) + Y from Card B (40). Empty under pair!
PHANTOM (260, 260) X from Card B (260) + Y from Card A (260). Empty whitespace!
Card A · (40, 260) scroll-snap-align: start Staggered lower-left target
Card B · (260, 40) scroll-snap-align: start Staggered upper-right target
Card C · (380, 360) scroll-snap-align: start Far diagonal anchor

Live CSS & computed style

2D scrollport snap state
metric measured value

references