How to Implement Scroll Snap: A CSS Feature Worth Knowing in 2023

Scroll Snap is an awesome CSS feature that allows you to level up the scrolling experience of elements equipped with a scrollbar. Once activated, these elements smoothly glide from one child element to the next, and they might even snap right into place as they transition.

It's pretty nifty!

Usually, a regular scrollbar doesn't attempt to automatically align itself with the positions of its immediate child elements. However, scroll snapping allows for this functionality.

Now, imagine a standard scrollbar and attempt to horizontally scroll among the direct descendants labeled A, B, and C:

Now we're going to incorporate Scroll snapping. Take a look at how the scroll automatically aligns with the closest child element:

If you're using a desktop device, you might want to try scrolling at a slower pace than you normally would to observe this fascinating effect.

Understanding its Functionality

To enable scroll snapping, you must meet the following prerequisites:

1. We have a container or parent element that includes a scrollbar. To achieve this, we utilize the CSS properties

   display: grid;

   and

   grid-template-columns: 100% 100% 100%

   . However, these three columns cannot fit within their parent element since they occupy a total width of 300%. To address this, we set the property

   overflow-x: scroll

   , which creates a scrollbar and prevents the content from overflowing beyond the container's boundaries.
2. To achieve the desired snapping behavior between direct descendants, make sure the parent element has the CSS property

   scroll-snap-type

   set to

   x mandatory

   . The

   x

   here represents the axis, allowing you to define whether snapping should occur horizontally or vertically. By using the

   mandatory

   keyword, you ensure that the snapping between direct descendants is mandatory, enforcing the desired behavior.
3. To make sure the scrollbar aligns properly with the direct descendant elements, you need to include the

   scroll-snap-align

   property. This property tells the browser how to position the scrollbar in relation to those elements. In the given example,

   scroll-snap-align: center

   was used, but using values like

   start

   or

   end

   would have produced the same outcome since the direct descendants occupy the entire viewport.

With the

scroll-snap-type

property, you have the option to define

proximity

instead of

mandatory

. This means that scrolling will only snap when the scroll position is extremely near to one of the direct children elements. Consequently, users are able to pause scrolling between direct children, although this scenario is typically uncommon.

Of course, you can achieve vertical scroll snapping by specifying the

y

axis instead of the

x

axis. However, it's important to exercise caution because altering the vertical scrollbar of a page can often be bothersome for users. While it might work well as a compact widget, it's generally best to refrain from implementing it for the entire page.

Direct descendants can also receive the

scroll-snap-stop: always

declaration, resulting in the interruption of scrolling on touch devices between those direct descendants.

Enhancing Scroll Snap for Improved Accessibility

Scrollable areas might cause an accessibility error, according to Axe. If you're utilizing Scroll snaps or scrollbars, it's important to ensure that individuals using keyboards can access the content as well.

One way to accomplish this is by ensuring that the direct descendants have anchors, as anchors can be focused on using a keyboard. However, if that's not feasible, we can resort to using the

tabindex