Which scroll-snap-type strictness fits a mixed-height card feed: mandatory or proximity?
25K 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?