by Emily and Jenny
What is CSS scroll-snapping?
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.
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].