Go to homepage

Projects /

October 9, 2020

Scroll Snap

By CodyHouse
404 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:

Project duplicated

Project created

Globals imported

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