Visualizing CSS Scroll Snap Points
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.
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.
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.