CSS Scroll-snapping

by Emily and Jenny

What is CSS scroll-snapping?

CSS Scroll-snapping was developed in 2016 to allow designers to ensure the user’s viewport would automatically snap to a defined element or location on a page at the end of manual scrolling. This ensures that the viewport starts or ends at the edge or center of a container instead of cutting off content. Before it’s creation, web designers used JavaScript to attempt a similar outcome, but the solution was cumbersome and did not allow for much precision. With the implementation of CSS Scroll-snapping, designers were able to achieve their desired result with only a few additional lines of code in their existing CSS file. 

How to code it?

There are multiple methods available to create customised scroll-snapping. The HTML file should be set up with a <div> called wrapper or a container that encloses all the content. The content can then be divided through <article>, <section> or <p> elements (only use section, if your content has a heading, as it required). The scroll-snapping enables the user to smoothly scroll between the different sections. 

To determine how strictly snap points are enforced while scrolling, the scroll-snap-type property is set on the parent container. It can have a number of different values. None makes the scroll ignore any possible snap points while scrolling. The x and y values enforces napping to positions on the horizontal or vertical axis only. The block and inline value snaps the container into positions along the block or inline axis only. The snap points can also be determined on both axes with the both value.

To customise the snap points further, optional values can be added to scroll-snap-type. The mandatory value determines that, if the parent element, the container, is not currently being scrolled the visual viewport will rest on a snap point. When the scroll action is finished the container automatically snaps to the snap point. The proximity value snaps to a snap point only, when it comes close in proximity to the edge of the container.

The parent element will have elements nested within, which can have their own property to determine where the exact snap point lies. Scroll-snap-align can have three different values, start, center and end. 

When to use it?

There are several benefits for the user when scroll-snapping is applied. Most importantly, it ensures that the user’s viewport is not stuck between two sections of information and doesn’t require them to be specific about where they place their scroll-bar. This feature is especially useful when there are well-defined breaks in the page content. For example, when presenting information in a slide-deck format. You can view a presentation use case in action here. This method can also be useful to allow the user to skim read the major points of an article; as long as the content fits comfortably within the viewport window. 

Additionally, this feature enables seamless image scrolling. If the traditional scrolling method is used for image slides, the user may have a difficult time positioning the image perfectly on their screen. This can be especially useful for mobile-first design because most people are accustomed to swiping through images on their phone rather than dragging the image into place. Click here to experience the difference scroll-snapping makes to image scrolling.

When not to use it?

While CSS Scroll-snapping is extremely useful in many cases, there are circumstances where it can hinder the user’s experience. On some webpages, scroll-snapping can cause the user to miss valuable information if the content is larger than the viewport. Front-end developer, Warren Davies, provides a useful demonstration of the drawbacks of using scroll-snapping in this scenario here. Scroll-snapping does not support mouse-dragging by default, which is not necessarily a bad thing, but requiring the user to scroll instead of dragging the viewport does limit their freedom a bit.

As a general rule, designers aim to give the user as much freedom to make their own decisions as possible, so applying a feature that removes their freedom of choice requires extra consideration. We must weigh the pros and cons of the implementation of scroll-snapping in order to determine if it will enhance the user experience enough to justify its limitations. In the case of mouse-dragging capabilities, it may be wise to do user testing to establish whether or not users attempt mouse-dragging on the web-page in the first place.

Overall, it can be said that CSS scroll-snapping is visual enhancement to certain content, which should be used with caution. It is important to evaluate the site’s content, and to determine if scroll-snapping is the most optimal solution, or if it would hinder the user in any way by creating accessibility issues that are not necessary. A minor advantage of CSS scroll-snapping is the non-necessity of using Javascript. This makes it more beginner friendly for developers, to produce a professional looking website, without having to know Javascript. On the contrary if scroll-snapping is overused on a singular page, it can be frustrating to the user resulting in bad user experience, and potentially an unhappy customer. 

Bibliography

Davies, W., 2021. Why not to use CSS scroll snap. [online] Alvaro Trigo’s Blog – Web developing and design. [Accessed 15 February 2022].

Developer.mozilla.org. n.d. scroll-snap-type – CSS: Cascading Style Sheets | MDN. [online] Accessed 15 February 2022].

Drasner, S., 2016. Introducing CSS Scroll Snap Points | CSS-Tricks. [online] CSS-Tricks. [Accessed 15 February 2022].

Flack, R. and Valipour, M., 2021. Well-controlled scrolling with CSS Scroll Snap. [online] web.dev. [Accessed 15 February 2022].

Kohler, M., 2018. Practical CSS Scroll Snapping | CSS-Tricks. [online] CSS-Tricks. [Accessed 15 February 2022].