CSS scroll snap: align cards without trapping the reader

How the rule works

A review queue has a short horizontal rail of case previews. Proximity snapping can help a swiped card settle near the start without forcing every small scroll to jump. Give the container overflow access and preserve keyboard navigation to links inside each card. The card's scroll-snap-align defines its target; it does not change its source order. Avoid mandatory snapping on long or variable-size content where a user might struggle to reach intervening text. If controls overlay the rail, account for them with scroll-padding and check the visible result. A browser may choose the exact snap behavior within specification constraints, so test touch, wheel, and keyboard scrolling.

.review-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 1rem;
}
.review-rail__card { flex: 0 0 min(18rem, 80vw); scroll-snap-align: start; }

Cost and verification

The rail needs no script or extra asset. Smoothness depends on the number and complexity of cards; expensive shadows and large images can make scrolling feel slow. Limit the data set and load images appropriately. Snapping is an enhancement to scroll access, not a carousel service: the code provides no next-button behavior, pagination, or announcement of the current item. Check that focus remains visible when a link is reached by Tab and that the rail does not obscure the card's content at high zoom.

Common Mistakes

• Do not hide the scrollbar unless another clear scrolling affordance exists.
• Do not use mandatory snapping for very tall cards.
• Do not assume scroll snapping changes keyboard focus order.

Connected lessons

• CSS Layout
• CSS overflow: contain long data without losing controls
• CSS reduced motion: remove nonessential movement at the source
• HTML link versus button: navigation and actions have different contracts

Related behavior

• CSS scroll offsets: reveal anchors below a persistent header

Further interaction details

• CSS scroll-snap-stop: require a stop only for short, uniform cards