CSS Scroll Snap Points
Have Arrived

CSS recently introduced a Scroll Snap Points feature that gives users a fluid and precise scrolling experience for touch and input devices.

This makes it easy to add "swipe views" (commonly used in native mobile apps) to your web apps and PWAs.

Creating this type of scroll snap effect in JavaScript is hard because of the interactions between scroll, touch, and mouse events. Even sophisticated plug-ins tend to interfere with scroll fluidity or get in the way of user actions.

Letting the browser handle this via CSS is a much better choice.

With the upcoming release of Chrome version 70 (scheduled for September 2018), support for CSS Snap Points will be available on all major browsers.

If you have Chrome version 70 (due in September 2018) or any other modern browser, you should be able to see this feature in action in this fiddle:

            [https://jsfiddle.net/Wijmo5/5f9d7cte/](https://jsfiddle.net/Wijmo5/5f9d7cte/)

Notice that the fiddle has no JavaScript whatsoever. All the layout and scroll logic is defined in CSS.

Current and Old versions of the spec

The CSS above contains a few entries that look redundant but are necessary to support the old and new CSS Scroll Snap Points spec on all browsers.

The current version of the spec (implemented by Chrome and Firefox) defines these properties:

• scroll-snap-type: none | mandatory | proximity;
• scroll-snap-align: [none | start | end | center] [none | start | end | center];
• scroll-padding: ;

The older version (implemented by IE, Edge, and Safari) defines these (all marked as deprecated on MDN):

• scroll-snap-points-: none | repeat();
• scroll-snap-destination: ;
• scroll-snap-coordinate: none | ;

Caveats

I have found that CSS Scroll Snap Points do not work on Safari iOS unless:

• The container must have the -webkit-overflow-scrolling property set to touch, and
• The scrollable elements must have the overflow property set to visible (the default value).

It took me several very frustrating hours to figure this out, since it doesn’t seem to be documented anywhere. I hope that you, my dear reader, won’t have to go through the same ordeal…

Swipe Views

Swipe Views are common on devices with narrow screens. They show content one page at a time and allow users to switch pages with swipe gestures. For example, Android phones use a swipe view to show favorite contacts, call history, and all contacts:

CSS Scroll Snap Points make it trivial to implement this type of interface. Here’s how you could add this to your PWA using a little HTML and CSS (and no JavaScript at all):

<!-- HTML -- >

/ CSS/
.snap-container {
display: flex;
align-items: stretch;
width: 100%;
overflow: auto;

scroll-snap-type: x mandatory; / Chrome Canary /
scroll-snap-type: mandatory; / Firefox /
-ms-scroll-snap-type: mandatory; / IE/Edge /
-webkit-scroll-snap-type: mandatory; / Safari /
-webkit-scroll-snap-destination: 0% 0%;
-webkit-overflow-scrolling: touch; / important for iOS /
}

.snap-container > div {
width: 100%;
flex-shrink: 0;

scroll-snap-align: start; / latest (Chrome 69+) /
scroll-snap-coordinate: 0% 0%; / older (Firefox/IE) /
-webkit-scroll-snap-coordinate: 0% 0%; / older (Safari) /
}

CSS Snap Points make is easy to implement swipe views on your Web and PWA apps. Because it's all done in CSS, there is no extra code to download, and the implementation is consistent and efficient on all browsers.

A Simple PWA with Swipe Views

We have used CSS Scroll Snap Points in one of our new samples, a Business Intelligence PWA called MyBI.

If you open the app on a phone, you will get a familiar swipe view and the usual navigation buttons below:

Because MyBI is a PWA, you can install it on your phone and use it even without an internet connection.

Conclusion

The next release of Chrome is due to be released in September 2018.

At that point, all major browsers (Chrome, Firefox, Safari, and Edge) will include support for CSS scroll snap points, so it should be safe to start using this great new feature in your PWAs right now.

Because this is a CSS feature, it degrades gracefully. Users of legacy browsers will still be able to use your app, except they won’t get the enhanced scrolling behavior. In our MyBI app, for example, the navigation buttons work independently of scroll snap points.

We hope you enjoyed this quick intro to scroll snap points, and that by now you feel confident and comfortable to add this feature to some of your web apps.

Do feel free to get in touch with us if you have any questions, requests, or suggestions: wijmoexperts@grapecity.com.