v157 · css · scroll snap · product pattern

Multi-carousel feed

The pattern every streaming and commerce site ships: a vertical feed of horizontal carousels. Each lane paginates sideways with plain, shipped scroll snap. The vertical half of the story — the feed snapping flush to the cards’ top edge — is exactly what per-axis propagation adds, because each lane is overflow-x: auto; overflow-y: clip and hands the cards’ vertical alignment up to the feed.

Probing this browser…

The feed

feed intro — no snap area. Scroll down, or run the measured check below.

Trending now

Continue watching

Recommended

tail — leaves room for the last shelf to reach the top
Scroll a lane sideways or the feed vertically — settles are reported here.
Not measured yet. The check nudges the feed 41px past the second shelf’s cards and reports where it settles, per the current mode.

the two strategies

/* What this feature enables — alignment lives on the CARD only: */
.feed   { overflow-y: auto; scroll-snap-type: y mandatory; }
.lane   { overflow-x: auto; overflow-y: clip; scroll-snap-type: x mandatory; }
.poster { scroll-snap-align: start; }   /* x consumed by .lane,
                                           y propagates to .feed */

/* Today's workaround — duplicate the intent on a wrapper: */
.shelf  { scroll-snap-align: start; }   /* a second, hand-kept snap area */

The workaround keeps two places in sync and snaps to the shelf edge (including its heading), not the card edge. With propagation, the card is the single source of truth for both axes — delete the wrapper rule and the feed aligns to the content itself.

see also