Visualizing CSS Scroll Snap Points

Posted

Firefox 39 dropped this week, and with it comes the arrival of scroll snap points support, possibly one of the best new layout features since flexbox. In fact, the two of them work nicely together. Okay, so scroll snap points are less of a layout feature, and more of a scrolling feature, but they’re probably going to be coupled together in most cases. In short, scroll snap points kinda do what it says on the tin: they cause the user’s scrolling to snap to a specific point in your design.

Perhaps the most obvious use for scroll snap points is for laying out JavaScript-free carousels. When the container is scrolled horizontally, the hidden contents slide neatly into place. You’ll also likely see this in vertical layouts where a web page wants to market certain product features, one after the other. As you scroll the page, it will automatically snap the next piece of content to the top of the screen, sort of like a scrolling slideshow.

Check out “Native CSS Scroll Snap Points” by Sergey Gospodarets to get a good run-down on how they work. In general, scroll snap points are remarkably easy to set up. Nevertheless, I managed to find a way to make things a little less intuitive than maybe what the spec intended. Some of the properties weren’t quite acting like I was expecting (or hoping), and since these features are so new, debugging takes more than a bit of trial and error and a whole lot of wondering, “Why’d that do that?”

To help parse just what the heck these new properties do, I built the Scroll Snap Points Visualizer on Codepen with the help of a little bit of Sass. You can fiddle around with the constants and the demo will draw vertical lines to demonstrate where the edges of each of the properties land. For instance, by changing the $snap-coordinate, the demo will update the visual indicators of where the next box will snap to when scrolling. Pretty useful!

What have I learned in my own playing around so far? Well, scroll snap points don’t quite work perfectly one hundred percent of the time. It very well could be that I’m not grasping some fundamental concept, but it seems that Firefox’s implementation has a few bugs in it, particularly when the scroll items’ widths are less than 100% of the container. For my purposes, though, it’s sufficient enough to start using for some website features.

In addition to Firefox, scroll snap points are supported in IE 10 for touch screens, and partially in IE 11 (and Edge) with a prefix and an older syntax. Support is also coming in Safari 9 with the release of OS X 10.11 El Capitan. While Chrome’s implementation is still marked “in development”, scroll snapping is typically not an essential feature and can often be built to progressively enhance the browsers that can understand the syntax. JavaScript solutions can then be layered on top, if so desired.

Carousels and slideshows can now be quickly and easily created without heavy, under-performing scripts or obnoxious scroll-jacking. Now is the time to start pushing this new native tool to its limits. Hopefully the Scroll Snap Points Visualizer will help you learn a thing or two.

Comments

No comments allowed at this time. Read my commenting policy.

← Older Newer →