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: