The scroll-snap-* Properties.

The following examples are overflow-scrolling divs. In the second, third and fourth examples, the blue cross represents the location of each container’s scroll snap destination.

This first container does not have any scroll snapping behavior.

1

2

3

4

This second container shows what basic scroll snapping can do for us.

1

2

3

4

The CSS for the above container is:

-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-x: repeat(100%);

This next container snaps to elements of different sizes when scrolling.

1

2

3

4

5

6

7

The CSS for the above container is:

-webkit-scroll-snap-type: mandatory;

The CSS for each of the container’s children is:

-webkit-scroll-snap-coordinate: 0% 0%;

Here, we snap elements of different sizes to the center of the container.

1

2

3

4

5

6

7

The CSS for the above container is:

-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-destination: 50% 50%;

The CSS for each of the container’s children is:

-webkit-scroll-snap-coordinate: 50% 50%;

This container shows centered scroll snapping in a 2D grid.

The CSS for the above container is:

-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-destination: 50% 50%;

The CSS for each of the container’s children is:

-webkit-scroll-snap-coordinate: 50% 50%;

This example takes the 2D scroll snapping grid above and rotates it by 30 degrees.

The CSS for the above container is:

-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-destination: 50% 50%;
-webkit-transform: rotate(30deg);

The CSS for each of the container’s children is:

-webkit-scroll-snap-coordinate: 50% 50%;

Images from NASA’s image of the day gallery.