CSS Scroll Snapping

by Emily and Jenny

Automatically snaps the viewport to a defined element or location on a page at the end of manual scrolling.

This ensures that the user’s viewport starts or ends at the edge or center of a container instead of cutting off content.

What is it?

Why was it developed?

CSS scroll snapping was developed in 2016 to provide a more accessible and light solution.

Developers initially relied on JavaScript to customize scrolling, but the JavaScript solutions did not allow for enough precision & not very concise.

Browser Support?

How to Code it?

/* Keyword values */ scroll-snap-type: none, x, y, block, inline, or both

/* Optional mandatory | proximity*/ scroll-snap-type: x mandatory, y proximity, both mandatory;

When to use it?

Use cases - image scroll, well defined sections of a site with limited text, skim reading as long as the content fits in the viewport

Allows the user to scroll without requiring them to place the scroll-bar in an exact position to view the content

Proximity is better used for more text. Mandatory is better for more defined sections

Do not use it when there is content that can be missed if it snaps to the next section

If you use it too much, you can limit the user’s ability to scroll freely, which creates a bad user experience.

When not to use it?

Thank you!

Davies, W., 2021. Why not to use CSS scroll snap. [online] Alvaro Trigo’s Blog - Web developing and design. [Accessed 15 February 2022].

Developer.mozilla.org. n.d. scroll-snap-type - CSS: Cascading Style Sheets | MDN. [online] Accessed 15 February 2022].

Drasner, S., 2016. Introducing CSS Scroll Snap Points | CSS-Tricks. [online] CSS-Tricks. [Accessed 15 February 2022].

Flack, R. and Valipour, M., 2021. Well-controlled scrolling with CSS Scroll Snap. [online] web.dev. [Accessed 15 February 2022].

Kohler, M., 2018. Practical CSS Scroll Snapping | CSS-Tricks. [online] CSS-Tricks. [Accessed 15 February 2022].