v156 · css · scroll snap
Use scroll-snap-type: pair to snap to a single element
With scroll-snap-type: both mandatory, the browser evaluates horizontal and vertical snap positions independently — meaning a 2D scroll container with Card A at (40, 260) and Card B at (260, 40) can snap to the empty cross-axis coordinate (40, 40) where no element exists at all. Chrome 156 adds the pair axis keyword (scroll-snap-type: pair mandatory and scroll-snap-type: pair proximity), forcing both axes to snap to the same single element.
concepts
-
Both vs. pair 2D canvas
Interactive 2D scroll container with staggered diagonal cards at
(40, 260)and(260, 40)comparingscroll-snap-type: both mandatory(which snaps to the empty(40, 40)phantom intersection) againstscroll-snap-type: pair mandatory, complete with a liveCSS.supportsprobe, snap target buttons, and a coupled-pair simulator fallback when nativepairis unavailable. -
Spatial mind-map navigator
A practical 2D spatial node canvas and mind-map explorer where panning or clicking node jump controls demonstrates single-element 2D snapping with live
(scrollLeft, scrollTop)Euclidean distance-to-node telemetry andscrollsnapchangestate synchronization. -
Diagonal gallery & phantom-intersection inspector
Interactive 2D snap-grid geometry visualizer plotting real element coordinates alongside the
N² − Nphantom cross-axis intersections generated byscroll-snap-type: both, with adjustable node counts, layout presets, and distance vector diagnostics.
why it shipped
When CSS Scroll Snap Module Level 1 introduced scroll-snap-type: both, its spec algorithm evaluated inline (X) and block (Y) snap offsets on orthogonal axes independently. That works for strict rectilinear spreadsheets where every row/column intersection contains a cell, but fails badly on staggered 2D canvases, mind maps, photo boards, and node graphs: any two elements at (X_A, Y_A) and (X_B, Y_B) manufacture two synthetic snap coordinates (X_A, Y_B) and (X_B, Y_A) over empty whitespace.
The new pair keyword selects a single candidate element whose combined 2D snap offset (X_i, Y_i) minimizes distance from the natural scroll end position, guaranteeing that when scrolling settles, an actual element is framed in the scrollport.
research record — use cases & exact surface
- Exact surface (CSS Scroll Snap 1):
scroll-snap-type: pair [ mandatory | proximity ]?where the axis keywordpairrequires the scroll container to snap to a `(block, inline)` position contributed by the same snap area on both axes. - CSSOM & feature detection:
CSS.supports('scroll-snap-type', 'pair mandatory')andCSS.supports('scroll-snap-type', 'pair proximity'), plusgetComputedStyle(el).scrollSnapTypeserialization. - Runtime flag:
CSSScrollSnapTypePairinruntime_enabled_features.json5. Enable in Chrome Canary/Dev with--enable-blink-features=CSSScrollSnapTypePairor--enable-experimental-web-platform-features. - Use-case portfolio: canonical staggered diagonal comparison (`both` vs `pair`), practical spatial mind-map explorer with live Euclidean telemetry, and the `N² - N` phantom-intersection geometry inspector.