Categories
Content Management

CSS Scroll Snapping

Welcome to my seminar tutorial, where I will I’ll be giving you all the information you need to use CSS scroll snapping in your websites, and improve your user’s experience. You can also view and download my powerpoint presentation here.

The basics

What is CSS Scroll Snapping?

Scroll Snapping is a feature in CSS that allows you to lock the viewport to specific elements when scrolling.

It helps improve the user experience by providing a smoother and predictable scrolling experience, specifically for users with motor impairments.

It also ehances erformance optimisation by reducing reliance on JavaScript which shrinks the site size and improves page load times.

The Properties

The Key Properties 
scroll-snap-type:

applied the parent elements & controls scroll snapping behaviour


scroll-snap-align:

applied to child elements & is used to determine the snap point (where the content should snap)

Each property has four different values with different effects:

scroll-snap-type:

X - horizontal snap

Y - vertical snap

mandatory - forces content to snap at a specific point

promixity - content will snap into place when close to the snap points

scroll-snap-align:

start - snaps at the start of the element

center - snaps at the center of the element 

end - snaps at the end of the element 

none - stops content from snapping into view

Note: you can pair the values X & Y with mandatory and/or proximity (e.g., scroll-snap-type: y mandatory;)

The Additional Properties 
scroll-padding:

sets the padding within the scroll container
scroll-margin:

adds space around the snap are
scroll-snap-stop:

Specifies whether the scroll container should force a snap on the next page (always) or the last page (none) when a user scrolls too fast. Useful for users on mobile devices.

Implementation

Step By Step Guide
Step 1: The HTML

To set up HTML for CSS Scroll Snap, you’ll need to create a container with child elements that will snap into place the user scrolls. Below is a simple example that demonstrates how to structure your HTML for a slideshow. If you already have your own HTML code, feel free to use it.

<html>
<section> 
  <h2>First slide</h2>
</section>
<section>
  <h2>Second Slide</h2>
<section>
  <h2>Third slide</h2>
</section>
</html>

In this example, <html> is the container element and <section>is the child element.

Step 2: The CSS

Once your HTML is set up, it’s time to define your scoll snap type and your snap point.

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

In this example, I am using ‘y mandatory’ as I want the content to force a snap on the y axis.

section {
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

I’ve used the value ‘start’ so that the snap point is at the start of every child element, and ‘always’ has been used to always take the user the next page when scrolling.

Step 3:The Result

See the Pen css scroll snap 2 by Emmanuella Nziza (@Emmanuella-Nziza) on CodePen.

Practical Applications

Examples
1. Images galleries

Credit: @argleink on Code Pen – https://codepen.io/argyleink/pen/bGvoZpK

See the Pen Snap Align – start, center, & end by Adam Argyle (@argyleink) on CodePen.

2. Carousels

Credit: @Schepp on Code Pen – https://codepen.io/Schepp/pen/WNbQByE

See the Pen A CSS-only Carousel Slider by Christian Schaefer (@Schepp) on CodePen.

3. Scrollable Stories

Credit: @pxco on Code Pen – https://codepen.io/pxco/pen/PoxpZEd

See the Pen scroll snap book by Paco (@pxco) on CodePen.

Browser Support

Can I Use Summary

According to CanIUse.com, CSS scroll snap is compatible with nearly every browser, making it easy for developers to implement and improve their user experience. Click here for a more information.

References:

Argyle, A. (2025, Jan 15). CSS scroll-state(). Chrome for Developers. https://developer.chrome.com/blog/css-scroll-state-queries

Can I use. (n.d.). CSS scroll snap. https://caniuse.com/?search=scroll%20snap

Kohler, M. (2020, June 18). Practical CSS Scroll Snapping. CSS Tricks. https://css-tricks.com/practical-css-scroll-snapping/

Mozilla. (n.d.). CSS scroll snap: Basic concepts. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap/Basic_concepts

Web Dev Simplified. (2023, May 16). Learn CSS Scroll Snap In 6 Minutes [Video]. Youtube. https://www.youtube.com/watch?v=ytl6TrroGis