Skip to Content

CSS Scroll snapping just blew me away

CSS seems to be stealing more and more functionality from things we traditionally had to use JavaScript for. This is good because not only does it help performance and reduce dependencies, it also makes our lives easier 😊. It also reduces the barrier of entry for people to make cool and fun websites, which is awesome.

I've been a huge fan of scroll-behaviour: smooth since I discovered it, and in a similar vien I've recently stumbled across scroll snapping and it's pretty incredible, and now that support has dropped on the most recent version of Chrome, I think that it's worth taking a look at it.

Here, is an example of how it works. Try scrolling and see what happens (you'll have to be on a desktop for this, as I mention lower down, browser support hasn't hit mobile yet).

See the Pen CSS Scroll snapping basic example by Kevin (@kevinpowell) on CodePen.

Cool, right?

How it works

Setting up the parent

It takes a little bit of work to get this to go. First, you need to give the parent a scroll-snap-type. First, you can choose if you want it on the x or y axis, or both. Second, you can choose between mandatory or proximity. As you can guess, mandatory forces the issue a litte more, whereas the proximity value is... well a bit abstract in my opinion. The spec even says that it may snap. mantatory can cause issues too though, if it scrolls when you're trying to read content.

So to get started you could throw something like this down to start:

body {
  scroll-snap-type: y mandatory;
}

Don't want to miss an article?

I share the cool little things I run across (like you're reading in this post right now) every Sunday. Sign up below to never miss a post.

    I won't send you spam. Unsubscribe at any time.

    Setting things up on the children

    With the parent having that in place, no behavior will change at first. For things to work, you also need to give the children a scroll-snap-align. This can take the values of start, end, and center. Basically, when the scroll snaps, should it snap to the start (top), the end (bottom), or the center of the element in question.

    Here is an example, the first is set to top, the second center, and the third one to end:

    See the Pen CSS Scroll snapping problem by Kevin (@kevinpowell) on CodePen.

    There is a lot more to it

    I'm just covering the basics here, but there is a lot more control that you can use, including setting padding and margin on the snap points.

    This is something that, once browser support gets a little bit better, I could see it being used quite a bit. I do see some issues that using this could cause though, as well.

    Browser support

    Speaking of browser support, as of the time of writing, browser support is a bit of a mixed bag. Chrome 69 recently hit, and with it came support for it, and Safari also supports it. IE, Edge, and Firefox all support an older version of the specification, but I can only guess Edge and Firefox will get there soon enough.

    One big issue at the moment though, is that there is no browser support on mobile yet, which is one of the places I see this working best. Hopefully we aren't waiting too long for it.

    Graceful degradation

    One nice thing about CSS scroll snapping is that, if someone is on an older browser that doesn't support it, it really isn't the end of the world. Things will still scroll, the site will still work fine, it just won't snap in place. Maybe it's not ideal, but at least everything is still working fine. This is a little different than say, Grid, where if you don't build in a fallback, can leave the site without a layout on an old browser.

    When should you use this?

    Scroll jacking is a contensious issue and I wouldn't just implement this because hey, this is cool!. While I think it's really awesome that CSS is introducing something like this, I do think people need to be careful with it. People think drop shadows are fun, and so use them too much and make terrible looking sites. Now that this is easy, people will use it in inappropriate places just because they think it's cool. Use it if you can justify it from the users perspective.

    Possible UX benefits

    The introduction section of the spec mentions the "imprecise nature of scrolling inputs like touch panning and mousewheel scrolling" with the example of "creating the effect of paging through content". Think of your mobile device. Whether it's Android or iOS, you've got a few 'pages' on your home screen, and it more or less uses scroll snapping to make sure you don't end up between two of those pages, which would be terrible. You could use this now in a web app, or even on a webpage in specific situations where it can enhance the user experience.

    One plae this could work well is setting up a carousel? You could easily have it center on each image with a scroll-snap-align: center. Or you can even pull it off with grid, like I did below (without images):

    See the Pen qMpWQZ by Kevin (@kevinpowell) on CodePen.

    If you're after some sort of effect like that, this could be a nice situation where you can forego JavaScript. But if you're just doing it to be cute, then maybe give it a second thought.

    It can be a cool effect, and it can add to the user experience if used correctly, but please be careful with it!

    Don't want to miss an article?

    If you never want to miss out on any of my content? Subscribe to my newsletter!

    It's one email every Sunday to keep you up to date with what I've been up to, plus I'll throw in some bonus stuff every now and then that I don't post anywhere else :)

      We won't send you spam. Unsubscribe at any time.