Understanding CSS Scroll Snap: Concepts, Examples, and Properties

In the recent Chrome 69 stable release, full support for the CSS Scroll Snap specification was added, allowing developers to define snap points so that the final scroll position aligns with the nearest or a specific type of point, improving scrolling experience.

The concept is similar to grid snapping in CAD software, where objects automatically snap to a grid, or a ruler where a brush can only land on 1 mm or 2 mm marks.

What is scroll snapping? It is the act of snapping the scroll position to predefined points. Two examples from the W3C specification are demonstrated.

Example 1 – Horizontal photo gallery – A series of images are placed in a horizontally scrollable container, with each image’s snap position aligned to the center of the viewport.

img {
    /* Align each image’s snap position with the horizontal center of the scroll viewport */
    scroll-snap-align: none center;
}
.photoGallery {
    width: 500px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* Ensure each scroll end lands precisely on a snap point */
    scroll-snap-type: x mandatory;
}

<div class="photoGallery">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <img src="img4.jpg">
    <img src="img5.jpg">
</div>

The red area in the illustration represents the scrollable viewport (snap viewport), while the yellow box marks the snap region. The scroll-snap-align property sets the snap point to the center of the element, which aligns with the center of the viewport.

Example 2 – Paginated document – The scroll position is snapped to the top of each page when the page is near the scroll container’s edge. This uses non‑precise snapping (proximity) so the scroll can stop near a snap point without being forced to it.

.page {
    /* Snap the top of each page */
    scroll-snap-align: start none;
}
.docScroller {
    width: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    /* Add 100 px top padding to the snap viewport */
    scroll-padding: 100px 0 0;
    /* Use proximity snapping */
    scroll-snap-type: y proximity;
}

<div class="docScroller">
    <div class="page">Page 1</div>
    <div class="page">Page 2</div>
    <div class="page">Page 3</div>
    <div class="page">Page 4</div>
</div>

From the above examples we can see the required conditions for snapping: a scrollable area, a defined snap viewport, and snap points within the snap region.

Snap viewport controls

The scroll-snap-type property turns a scroll container into a snap container and controls the strictness of snapping. If no strictness is specified, the default is non‑precise (proximity).

It accepts two parameters: the axis (x, y, block, inline, both) and the strictness (none, mandatory, proximity).

Examples:

html {
    scroll-snap-type: y mandatory;
}

Other related properties

scroll-padding defines the inner padding of the snap viewport, allowing finer control over where snapping occurs. Its syntax mirrors the standard padding property.

scroll-margin sets the margin between the snap region and the snap element, effectively enlarging the snap region.

scroll-snap-align specifies the alignment of a snap element within the snap viewport (e.g., start, end, center). It can be set for both axes, and if the second value is omitted, the first value applies to both axes.

.item {
    scroll-snap-align: none start;
}

In summary, CSS Scroll Snap provides precise control over the final scroll position, ensuring that important content is presented at optimal locations. While only some browsers fully support the latest specification, broader adoption is expected.

References

https://www.w3.org/TR/css-scroll-snap-1/

https://webdesign.tutsplus.com/tutorials/how-to-scroll-snap-using-css--cms-30333