Go to homepage

Projects /

October 9, 2020

Scroll Snap

By CodyHouse
400 HTML, CSS, JS components. Download →

Understanding CSS Scroll Snap.

CSS Scroll Snap allows you to customize the scrolling experience by setting points where the scroll position should move ("snap points").

You can use this property to create effects that would otherwise require tons of JavaScript (often with poor results).

The basic idea is to have a parent element with scrollable content and a list of children (or sections) where the scroll should move to.

.parent {
  /* the parent needs to have scrollable content */
  height: 100vh;
  overflow: auto;

  /* set scroll snap */
  /* y = y-axis; mandatory = scrolling is forced to the next point */
  scroll-snap-type: y mandatory; 

  /* alternative options */
  /* x = x-axis; proximity = snapping is triggered by getting close to the snap point */
  scroll-snap-type: x proximity;

Here's an example:

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.