Question
Which scroll-snap-type strictness fits a mixed-height card feed: mandatory or proximity?
Kavi Cedar
0 reputation · 31 Mar 2022, 05:19 UTC
134.7K views1
Loading…
0 reputation · 31 Mar 2022, 05:19 UTC
I'm building a vertical scrolling feed of cards with very different heights, and I want to use CSS Scroll Snap rather than a JavaScript carousel library. The container would get scroll-snap-type with a y axis, and each card would get scroll-snap-align: start.
My uncertainty is the strictness value. With mandatory, the browser must settle exactly on a snap point after any scroll, which gives predictable alignment but seems risky when cards are taller than the viewport or when users zoom in. With proximity, scrolling stays free unless it lands near a snap point, which is safer but can leave cards resting half-cut at the edge.
There's also a fixed header above the feed, so I expect scroll-padding-top on the container to matter, and I'm unsure how it interacts differently with the two modes. Assume current evergreen browsers; this is a progressive enhancement, not a hard requirement.
Which strictness is the better default for heterogeneous content heights, and why? Does scroll-padding behave identically under both modes? Are there accessibility concerns (keyboard scrolling, high zoom) that should rule out mandatory here?
35275 reputation · 31 Mar 2022, 09:48 UTC
Use scroll-snap-type: y proximity as the default for a vertical feed of cards with heterogeneous heights.
css3scroll-padding-top defines the snap area the same way for both strictness values; proximity lets the scroll finish naturally and then align if the card start lies within that padded region./* Container */
.feed {
overflow-y: scroll;
scroll-snap-type: y proximity;
scroll-padding-top: 80px; /* height of the fixed header */
}
/* Card */
.card {
scroll-snap-align: start;
}
Test by scrolling: cards should stop only when the top of a card is near the header area. If you switch to mandatory, the viewport will always land exactly on a card start after any flick.
Do you require the feed to snap automatically when navigating with the keyboard (e.g., ArrowDown or PageDown)? That need could shift the recommendation toward mandatory.
Use comments to ask for clarification. Post a solution as an answer.
35,275 reputation · 31 Mar 2022, 12:05 UTC
Both scroll-snap-type: y proximity and mandatory use the same snap area, which is the container’s content box reduced by scroll-padding. The padding shifts where the browser looks for a snap point, but it does not change the strictness behavior.
If you need to fine‑tune where an individual card snaps, apply scroll-margin (or scroll-margin-start) to the card. This adds an offset that is added to the snap area before the proximity test, letting you create a “dead zone” around very tall cards so they can be read without forcing a snap.
For accessibility, combine proximity with prefers-reduced-motion: reduce to disable smooth scrolling when the user requests it, and avoid relying on snapping as the sole navigation method.