CSS has a feature called scroll snapping. A lot of the demos and examples, rightfully so, focus around things that benefit highly from it. For instance, an image slider, carousel, or grid of things that just beg to be aligned after scrolling.

But you don’t have to be in such a strict and rigid situation for scroll snapping to just be a nice touch. Instead you can think: is there anything on this page that would look or feel nice if when you scrolled nearby it would snap into place?

Maybe you have one of those “full viewport filling” headers to a page. If you added a scroll snapping point to the first element after that (e.g. .article-header + :first-child) then you could help users scroll right to it, whooshing past the giant header. Like:

Love it? Hate it? It’s just an idea. Some people really bristle against things that seem to take scrolling control away from them.

We could go a bit more chill.

What if just the headers of an article had scroll snapping points? That looks something like this, by the way:

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

main {
  h2, h3 {
    scroll-snap-stop: normal;
    scroll-snap-align: start;
  }
} CSS 

Now you’ve got these headers that just so happen to line up very nicely at the top of the screen when you get close to them:

Gotta tell ya there: don’t hate it.

Here’s a demo where the headers are scroll snap points, plus the header itself, plus the very first thing after the header. I’ve also used a smidge of scroll-margin-block-start to push the snap point a little bit away from the header giving it some breathing room.

main {
  max-width: 60ch;
  margin-inline: auto;
  h1,
  h2,
  > h1 + * {
    scroll-snap-stop: normal;
    scroll-snap-align: start;
  }
  > h1 + *,
  h2 {
    scroll-margin-block-start: 0.5rem;
  }
}

html {
  scroll-snap-type: y mandatory;
} CSS 

My main point isn’t “do exactly this”, it’s just that thinking about scroll snapping points in a design doesn’t have to be relegated to carousels. There is likely smaller and more chill opportunities to slap in snap point just to make something feel a bit more polished.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

Author

Learn with Frontend Masters