How to Use CSS Scroll Snap Points

CSS recently introduced scroll snap points — a feature that gives users a fluid and precise scrolling experience for touch and input devices. Scroll snap points determine the precise positions where a container’s scrollport will end after a scrolling action. Implementing CSS scroll snap points makes it easy to add "swipe views" (commonly used in native mobile apps) to your web apps and progressive web applications (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 69 (scheduled for September 2018), support for CSS snap points will be available on all major browsers. If you have Chrome version 69 or any other modern browser, you should be able to see this feature in action in this fiddle. Notice that the fiddle has no JavaScript whatsoever. All the layout and scroll logic are defined in CSS.

Current and older versions of CSS Scroll Snap Points

The CSS above contains a few entries that look redundant but are necessary to support the old and new CSS scroll snap points specs 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 Internet Explorer, Edge, and Safari) define these (all marked as deprecated on MDN):

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

• scroll-snap-coordinate: none | ;

• scroll-snap-coordinate: none | ;

CSS scroll snap point 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 frustrating hours to figure this out, since it doesn’t seem to be documented anywhere. I hope that you won’t have to go through the same ordeal.

Swipe view overview

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 progressive web app using a little HTML and CSS (with no JavaScript at all):

<!-- HTML -- >  
<div class=”container”>  
  <div>  
    favorites  
  </div>  
  <div>  
    call history  
  </div>  
  <div>  
    contacts  
  </div>  
</div>  
/* 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 progressive web 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 which makes use of Wijmo components, such as our JavaScript DataGrid. You can see it in action here.

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

What's next for CSS Scroll Snap Points

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. For example, in our MyBI app, the navigation buttons work independently of scroll snap points.

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

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

Download Now!