Scroll snapping simplified
Tags: css, html, codenewbie, codepen
Published: 2021-01-10 06:19:03

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). 

![Scroll Snapping Gif](https://dev-to-uploads.s3.amazonaws.com/i/2hqaotke8ku7qqkqhg3f.gif)

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.

![Proximity Scroll Snapping Example](https://dev-to-uploads.s3.amazonaws.com/i/ubtfq5yqwc2mk02m6hi8.gif)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6pa5y1ctti3k79fveof1.gif)

  - **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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qr65tur97wbg6o4tloum.gif)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/omqkep85u8ppg47ys9tw.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:

{% codepen https://codepen.io/akshaya-venkatesh8/pen/gOMryam default-tab=css,result %}

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 
 {% twitter 1317881876472762368 %}





For a complete explanation on scroll snapping and CSS scroll snap module - here are my references. 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
https://css-tricks.com/almanac/properties/s/scroll-snap-type/
https://css-tricks.com/almanac/properties/s/scroll-snap-align/