Scrolling Effects With CSS Scroll Snap

As the use of mobile and tablets on websites increased, the touch feature became more crucial for  UI / UX. Using moving or scrolling effects has become more common both in sliders or galleries and in other sections of your webpage.

Normally, sliders or galleries scroll with smooth effects thanks to frameworks such as Bootstrap in CSS. It is also possible to use the CSS Scroll Snap feature to give similar effects in divs, sections, buttons, etc if they tend to scroll horizontally or vertically. 

My first step was using the display: flex and overflow-x: auto definitions are made for the container of the area we want to slide. Contents have to align horizontally or vertically and overflow: auto out of its container.

<div class="section">
  <div class="sub_div div_1">Item 1</div>
  <div class="sub_div div_2">Item 2</div>
  <div class="sub_div div_3">Item 3</div>
  <div class="sub_div div_4">Item 4</div>
  <div class="sub_div div_5">Item 5</div>
  <div class="sub_div div_6">Item 6</div>
  <div class="sub_div div_7">Item 7</div>
  <div class="sub_div div_8">Item 8</div>
  <div class="sub_div div_9">Item 9</div>
  <div class="sub_div div_10">Item 10</div>
</div>

.section {
   display: flex;
   overflow-x: auto;
}

Now we have a scrolling container.

But, the containers don’t scroll smoothly. When you force them to move with your touch, they will scroll as long as it takes without anything stopping them. To prevent that, we need to add two more properties, one to section and sub divs per each.

To sub divs: scroll-snap-align: start;

With the scroll-snap-type, we specified if an element is a scroll snap container and whether it snaps on the x-axis or y. For example, if we would’ve build a mobile layout, our scroll-snap-type would be y. As mandatory, we said that the scrolling must snap to a specified point (its starting point in our example) of its container every time, no matter how we forced it to scroll with our touch.

Scroll-snap-aling determines if the div’s at least 50% appears in the container, it will align itself automatically to the left. Otherwise, it will scroll aside and leave the aligning point to the next child element.

Aligning Horizontally and Vertically

In the example above align was determined as start and zeroed to the left. Center or end also can be used. In this case, the floating area will automatically stop itself according to that alignment.

scroll-snap-align: end;

scroll-snap-align: center;

Using Padding and Margin

You may prefer to use padding and margin in both container and sub divs for a more user-friendly design. Also, these properties may be defined with scroll-padding and scroll-margin just like using flex: the gap in flexbox to make your code cleaner and readable.  

Using in Mobile Design

You can redesign your layout to a mobile view by using a scroll snap on the y-axis. In the example below, I gave a height of 100vh to the container to ensure that will cover all screens. After that, all sub divs are aligned in descending order with flex-direction: column. I determined that all divs will scroll horizontally with scroll-snap-type: y mandatory. Finally, I specified each div’s height as 70vh and aligned them centered with scroll-snap-align: center.

.section {
   height: 100vh;
   flex-direction: column;
   overflow-y: auto;
   scroll-snap-type: y mandatory;
}
.sub_div {
   height: 70vh;
   scroll-snap-align: center;
}

What I like about scroll-snap is that it helps thinking about design where cards, texts, icons, and sections become more dynamic and even movable. So the page can become more dynamic with mobile / tablet use without spending so much time.

You can verify the usage of scroll-snap with many examples. I mostly tried to show its help in aligning and scrolling aspects. You can also use Javascript APIs or events with these properties and make your page more dynamic.