CSS scroll snap builder
Scroll snapping makes a scrolling box stop neatly on each slide. Set the axis, strictness and alignment, scroll the preview, and copy the CSS and HTML.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose horizontal or vertical scrolling and how strictly it should snap.
- Pick which edge of a slide aligns, the slide size and the gap.
- Scroll the preview with a mouse, a trackpad or the arrow keys to test the feel.
- Copy the CSS and the HTML skeleton, and rename the selectors to match your page.
How it works
The scroller gets scroll-snap-type: x mandatory (or y, or proximity) and overflow: auto on that axis. Each slide gets scroll-snap-align and a fixed share of the scroller through flex: 0 0 <size>%. The preview uses these same properties, so what you feel there is what the CSS does.
Example
Five slides of 80% width with a 16px gap and start alignment: each swipe ends with a slide at the left edge and a part of the next one peeking in, which hints that there is more to scroll.
Tips
- Slides below 100% wide show a peek of the next slide; use 100% for a full-page pager.
- Prefer proximity for long vertical feeds, where mandatory snapping can feel sticky.
Frequently asked questions
What is the difference between mandatory and proximity?
With mandatory the box always comes to rest on a snap point after scrolling. With proximity the browser snaps only when the scroll ends close to a snap point, which is gentler for long content.
What does the alignment do?
It chooses which edge of a slide lines up with the matching edge of the scroller: start, center or end. Center is common for cards that are narrower than the box.
What is scroll-padding for?
It shrinks the area used for snapping, so a slide stops clear of a fixed header or an edge fade instead of sliding under it.
Can the user still scroll with mouse, touch and keyboard?
Yes. Snapping changes where scrolling ends, not how it starts. Give the scroller tabindex=0 if it has no focusable content, so keyboard users can scroll it with the arrow keys.
Why does the vertical version have a fixed height?
A vertical scroller only scrolls when its height is limited. The generated CSS uses a placeholder block-size that you should replace with the height your layout needs.