In CSS scroll snapping, how do scroll-snap-type: y mandatory and y proximity differ, and where do the snap positions come from?

## The two halves Scroll snapping needs declarations on both the scroll container and its children, and forgetting the second half is the usual reason "snapping doesn't work". **On the container**, `scroll-snap-type` takes an axis and a strictness: ```css .gallery { overflow-x: auto; scroll-snap-type: x mandatory; display: flex; } ``` Axis keywords are `x`, `y`, `block`, `inline` and `both`. Strictness is `mandatory` or `proximity`; if omitted, `proximity` is used. `scroll-snap-type: none` turns it off. The container must actually be a scroll container — snapping is a property of scrolling, so `overflow` has to be `auto` or `scroll` on the snapping axis. That is the second most common reason nothing snaps. **On the children**, `scroll-snap-align` declares where each item's snap position sits relative to the scrollport: ```css .gallery > * { flex: 0 0 100%; scroll-snap-align: start; } ``` Values are `none`, `start`, `center` and `end` (one value applies to both axes; two set block and inline separately). `start` lines the item's start edge up with the scrollport's start edge — the carousel default. `center` centres it, which is right when items are narrower than the scrollport and you want the focused one in the middle. ## mandatory versus proximity `mandatory` promises that the scrollport will always come to rest at a snap position. Release a flick anywhere and the browser animates to the nearest one. This produces the crisp paged feel of a full-bleed carousel, and it also means the scroller can never stop somewhere ambiguous. That promise is also its danger. If a snap area is larger than the scrollport — an item taller than the visible height — the region between snap positions cannot be rested on, so parts of the content become unreachable: scroll toward them and you are pulled back to a snap position. The same problem appears when content is added dynamically near the current position, which can yank the user somewhere they did not ask to be. `proximity` hands the decision to the browser: it snaps only when the natural end of a scroll lands close enough to a snap position, and otherwise leaves the scroll where it stopped. Nothing becomes unreachable, and the feature degrades into an assist rather than a rule. For long documents, article sections, or lists of variable-height items, `proximity` is the safer default; reserve `mandatory` for genuinely paged surfaces whose items are known to fit the scrollport. ## Adjusting the snap geometry Two more properties tune where the alignment lands: - **`scroll-padding`** on the container insets the scrollport for snapping and for scrolling content into view. This is the fix for a sticky header covering the top of a snapped item: `scroll-padding-block-start: 4rem` moves the effective snapport edge below it. It follows the same shorthand pattern as `padding`, with logical longhands. - **`scroll-margin`** on an item outsets that individual item's snap area, letting one element sit a little differently from its siblings without touching the container. A third, `scroll-snap-stop: always`, prevents a fast flick from skipping past an item: normally a strong gesture can travel several snap positions at once, and `always` forces the scroll to stop at that item. Use it sparingly — it makes long carousels tedious — but it is right for onboarding-style sequences where no step should be jumped. ```css .steps { overflow-y: auto; scroll-snap-type: y mandatory; scroll-padding-block-start: 3.5rem; /* clear the sticky header */ } .steps > section { block-size: 100%; scroll-snap-align: start; scroll-snap-stop: always; } ``` ## Practical cautions - Snapping applies to user scrolling and to scrolls the browser performs; it does not change layout, so a snapped carousel is still an ordinary flex or grid row underneath. - Keyboard and assistive-technology users still need every item reachable. `mandatory` snapping with oversized items is an accessibility problem, not just an aesthetic one. - If a snapping container also nests inside another scroller, containing the chain at its boundary keeps the two from fighting. - Snapping is not a carousel component: there is no notion of "current slide" in CSS, no controls, and no announcement to assistive technology. It is the scrolling behaviour only, and the rest of the component still has to be built.