Basic CSS scroll snap tutorial

Posted in Tutorials

In bleeding edge browsers, you can use CSS properties such as …

• scroll-snap-destination
• scroll-snap-type
• scroll-snap-coordinate

to implement scroll snap.  There are more CSS properties related to scroll snap (such as scroll-behavior).  But these are the minimum three properties that you will need to use to do anything useful.  The first two (scroll-snap-destination and scroll-snap-type) are to be applied to the scroll container.  And the third (scroll-snap-coordinate) is to be applied to the scroll element.

The time of this writing is December 2015 and support is currently limited to the browsers listed in caniuse.com.  Chrome does not support at this time.  But Firefox does and so screen shoot being used in this tutorial is with Firefox 42. Also the support not only depends on the browser version but also the device you are one.  For example, IE 10 will support scroll snap if you are on a touch screen device. Otherwise not.

Let’s set up a scroll container of width 200px and height 300px with overflow auto (so that scroll bars are shown when content is longer than the container)…

And inside our container, we put three boxed content …

 

These three boxed contents will be our scroll elements that will snap to the top edge of our scroll container.  We give each box the class “box” so that we can style it.  Box “two” and “three” will have a different color for variety and visual clarity…

When we render this in browser, it looks like this.

But nothing special yet.  There is no scroll snapping.

Unless we add scroll-snap-destination and scroll-snap-type to the scroll container and add scroll-snap-coordinate to the scroll elements…

The scroll-snap-destination and scroll-snap-coordinate takes the x position and the y position (you have to remember to specify both).  The most basic case is to have them all at 0% as shown above (which will work in our simple example to make the top edge of scroll element snap to the top edge of the scroll container).

Sitepoint has a good tutorial on scroll snaps and explains with drawing how these position coordinates work.  And their Code Pen demo can detect if your browser support scroll snaps.

The scroll-snap-type has the value of none, proximity, and mandatory.  The value none will turn off scroll snap.  Some browser will have this as the default, in which case you need to have the property scroll-snap-type with one of the other two values in your CSS in order for scroll snap to work.  While none gives you no scroll snap, the value mandatory will give you the strongest scroll snap where you can not land in any other position other than a scroll snap position.   The value proximity is in between where it scrolls normally until you get to a scroll snap (in which it then snaps to position).

The scroll-behavior is optional and takes values of auto and smooth.

If I only want the second box to snap, then I change the CSS properties to as follow and I need to use scroll-snap-type proximity (otherwise I can not scroll to box one)…

It is also to scroll snap to the body and not use the container at all.

---