Scrolling is a second nature thing when it comes to technology. A large amount of content, too much to fit on your screen, the first instinct is to scroll down. On the web, we do sometimes have a need to make scrolling a bit fancy with things like smooth animations for example. While mostly this is done with JS for most, there are some possibilities with CSS. A newer one being scroll snap.

Scroll snap is when natural scrolling is altered to “snap” to a section. This can be done by the X or Y axis, and the elements inside of the designated area have a few options to how it snaps. Let’s look at some code.

.ScrollContainer {
  scroll-snap-type: x proximity;
}

.ScrollContainer article {
  scroll-snap-align: end;
}