WWW… Wednesday! CSS Scroll Snap

by Taylor Slattery | July 31, 2019

For an increasing number of people, smartphones have become their device of choice for browsing the web. The difference in screen orientation and touch-based interface has necessitated that the way we design websites change on a fundamental level. First introduced in 2016, CSS Scroll Snap is a feature many of us may be more familiar with than we realize. Similar to the way home screens on smartphones smoothly swipe side to side to access additional apps, Scroll Snap designates points along a web page to snap to, ensuring that the page’s content is displayed in its intended way.

For those of us who spend a great deal of time carefully preparing the content for our sites, Scroll Snap offers another degree of control. Its ability to work across different browsers and within a responsive page design helps to create a similar browsing experience regardless of device.

On a basic level, Scroll Snap functions by snapping items to set points within a container. In the examples below, the snap points are represented as red dotted lines, and the containers are outlined in green. Snap points have a couple of different orientations. First, they can be set to a position relative to the container, as seen in the first example below. They can also be set to a position relative to the items themselves, seen in the second example below. It sounds simple enough. So when should you use it?

vertical-scroll-snap

horizontal-scroll-lock

If images are your primary form of content, Scroll Snap will prove particularly useful. Strategic placement of the snap point will prevent the images on your site from being only partially visible. This makes it a great choice for use in any sort of image gallery, like carousels or grids. It is also well suited for some types of text, like captions below images.

Larger amounts of text can be problematic. If the body of text doesn’t fit cleanly within the defined container, Scroll Snap might make certain parts of the copy inaccessible. In the example below, because the snap is configured to bring the top of the images to the snap point, part of the text has become impossible to read.

scroll-lock-incorrect-spacing

Therein lies the main problem with Scroll Snap. When the content is larger than the container, managing snap points can become difficult. If you use only a single parameter, parts of your content might be completely inaccessible. In the example below, we can see that the portion of the image that bleeds out of the container will be skipped over as the scroll snaps to the top of the next image. This is problematic for both images and text. For that reason, Scroll Snap is not particularly well suited for articles, where individual reading preferences might not be best served by a single snap point. Some might prefer to read pages from top to bottom, like a book, while others might constantly scroll to keep their current line at the top of the screen.

Ultimately, by using CSS Scroll Snap, you are taking a degree of control away from the user. CSS Scroll Snap can make for an impressive website experience, but it may not be the best choice for your particular type of content. As always, content is king, so carefully consider your content and audience when designing your site.