CSS play

Responsive scroll snap points

A demonstration to show the support for this CSS style

At the moment (06/04/2016) this is fully supported on iOS, Mac, IE11 and Edge. These browsers will work using the mouse, trackpad, and touch screen.

If you are browsing using any of these then scroll the page to see it travel one screen height at time.

Firefox

Responsive scroll snap points

This browser has some support.

You can use the mouse to scroll one screen at a time, BUT it does not always stop at the next snap point.

It also does not work on touch screens.

Chrome

Responsive scroll snap points

This browser does not yet support the style.

But they are working on it for a future release.

Opera

Responsive scroll snap points

This browser does not yet support the style.

Page five

Responsive scroll snap points

There are eight screens in this demo. As this demo gets more support then I will be updating the text.

There is no javascript/jQuery used in this demonstration. The scroll snap uses just CSS.

Page six

Responsive scroll snap points

The page source code will give you all you need to study this demonstration.

Page seven

Responsive scroll snap points

One more screen to go.

Page eight

Responsive scroll snap points

This is the last screen so you can now scroll back to the top of the page one screen at a time.