⚡️ Download 374 HTML, CSS, JS Components and 8 templates for $99 - Limited time offer ⏳

October 9, 2020

Scroll Snap

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.