Scroll snapping simplified

#css #html #codenewbie #codepen

Have you ever wondered how carousels work in a browser? By default, when you stop scrolling, the elements on the screen remain stationary, but in a slider or carousel, the screen always snaps to a frame and freezes until you slide once again. This is primarily achieved with a simple CSS concept called Scroll Snapping. This blog will simplify and explain 2 properties that achieve scroll snapping. Keep scrolling to find out (pun intended). :p

Scroll snapping can be defined as a way of enabling the browser to control scrolling and force a particular element completely into or out of a viewport/container (sort of like a magnet).

It can be done with the help of 2 CSS properties that go hand-in-hand.

scroll-snap-type : x/y mandatory/proximity none(default);
scroll-snap-align: start end/center none;

Scroll snap type is used to control the physics or animation used to snap an item by specifying the axis or direction and behaviour. It is usually applied to the parent element or the element which contains a group of elements that need to scroll. The direction value is straightforward i.e. the value x or y snaps the element in the axis mentioned. however, behaviour is slightly different.

The default behavior is none and is the same as default scrolling.
Upon using the mandatory behaviour - on scroll - the browser always forces the bigger element, i.e., the element with more than 50% of its width or height scrolled into view, to move completely into the container as demonstrated in the gif above.
When used, proximity behavior snaps the scrolling element into the container only if the element is close to the edge of the snap container(known as the snap position). If the user scrolls manually to a position that is not in a range close to the snap position, the default scroll behaviour is observed.

In addition to axes, x and y scroll-snapping can also be done in "block" and "inline" axes which snap in the block or inline axes respectively.

Next, the scroll-snap-align property controls the placement of the element in the parent container. It is usually used when the parent element or the container has an explicit scroll-snap-type. It takes the values "start", "end" or "center". The effect of this property is significant especially when the child elements do not occupy the entire snap container or snap port. Consider the following scenario: the child elements inside a scroll port take up 80% of the height of a scroll snapping parent with scroll-snap-type: y mandatory. In this case, using scroll-snap-align with the value -

start will position the child elements at the start of snap port like the following example.

center will position the scrolling child elements in the vertical center of the snap port as the parent snap direction is y as Demonstrated in the following gif.

end will likewise, position scrolling elements at the end of the snap container as seen in the upcoming gif.

Thus, scroll-snap-type in combination with scroll-snap-align used in the above way can achieve simple scroll snapping. In addition to these properties, scroll padding and margin properties are also supported, which set the padding or margin of the scrolling elements. These properties are commonly used in carousels that either show parts of the next/previous slide in the viewport or create wider space between the slides.

A complete working example of scroll-snap-type and scroll-snap-align can be found in the CodePen below:

The pen uses y mandatory snap-type with center snap align. However, the usage of other snap types can be experimented by uncommenting lines 21 or 22, and usage of snap align by uncommenting lines 59 or 60.

Thank you for reading. Hope this helped!
Also, you can find a smaller version of this on my Twitter

Akshaya Venkatesh

@venkyakshaya

After a small dent in the streak I am back at #52weeksofcodepen. This week I explored scroll snapping and it’s types.
Animation using - @greensock ‘s Scroll Trigger.

Design inspired from @Volorf

@Codepen - codepen.io/akshaya-venkat…

Scroll snap types explained - a thread - 1/6

17:34 PM - 18 Oct 2020