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: To achieve this, we utilize the CSS properties and . 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 , which creates a scrollbar and prevents the content from overflowing beyond the container's boundaries. We have a container or parent element that includes a scrollbar. display: grid; grid-template-columns: 100% 100% 100% overflow-x: scroll To achieve the desired snapping behavior between direct descendants, set to . The here represents the axis, allowing you to define whether snapping should occur horizontally or vertically. By using the keyword, you ensure that the snapping between direct descendants is mandatory, enforcing the desired behavior. make sure the parent element has the CSS property scroll-snap-type x mandatory x mandatory To make sure the scrollbar aligns properly with the direct descendant elements, you need to include the property. This property tells the browser how to position the scrollbar in relation to those elements. In the given example, was used, but using values like or would have produced the same outcome since the direct descendants occupy the entire viewport. scroll-snap-align scroll-snap-align: center start end With the property, you have the option to define instead of . 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. scroll-snap-type proximity mandatory Of course, you can achieve vertical scroll snapping by specifying the axis instead of the 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. y x Direct descendants can also receive the declaration, resulting in the interruption of scrolling on touch devices between those direct descendants. scroll-snap-stop: always 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, as a last option. we can resort to using the attribute tabindex