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

When to use it

A short horizontal onboarding rail asks a reviewer to inspect three uniform case summaries in order. Mandatory snapping and an always stop on each card can make each swipe land on a card rather than jump from first to last. Keep real next and previous controls if the workflow depends on progression; CSS cannot record that someone read a card. Test touch, a high-resolution trackpad, keyboard Tab navigation, wheel scrolling, zoom, and the final card. Never use this pattern for long paragraphs or cards taller than the scrollport: mandatory stops can make intervening content hard to reach. If summaries can grow through localization or user-entered text, choose proximity snapping or ordinary scrolling instead. A reviewer still needs a direct route to every card, and source order should match the visual sequence. The rail must remain scrollable when snapping is unsupported.

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

Cost and verification

Scroll snapping does not download resources, but it can increase interaction cost when users must cross several stops to reach the desired item. Measure task completion and test varied input devices rather than assuming strict snapping is helpful. A single oversized card can trap the viewport at an awkward position. When support is absent, native scrolling should still expose every card. Keep controls and focus management in HTML and application code; CSS does not satisfy a read acknowledgement or advance workflow state. Use the rule only where the small fixed sequence has been tested with real copy and at high zoom.

Common Mistakes

• Do not set always without a defined snap container and alignment.
• Do not force mandatory stops on long or variable-height content.
• Do not count a CSS snap as proof a card was reviewed.

Connected lessons

• CSS Property Decisions
• CSS scroll snap: align cards without trapping the reader
• CSS overscroll behavior: stop unwanted scroll chaining
• CSS reduced motion: remove nonessential movement at the source