Ir para conteúdo

CSS Scroll Snap Points


Image of a sidewalk and coconut tree in the background behind a grid

Scrolling effects always have been more related to touch devices, however, lately, many projects have used this feature,

Efeitos de scroll sempre foram mais relacionados a dispositivos touch, no entanto, ultimamente vários projetos tem incorporado esse item, enriching the user experience (of course, for everything there are exceptions).

The solution to apply this effect, generally it was like a jQuery plugin or something similar and the basic idea was to divide the content into different areas which the user cold scroll into them, or click in some button and the page was responsible make the scroll automatic.

So, the CSS guy says: “Take it easy boys! I’m comming with good news and we could do it only with CSS.

CSS Scroll Snap

Basically we can control the behavior of a content inside of a scroll container setting snaps in x and y axis. With these snaps, the wrapper will jump to each of these snaps after the user has made the scroll action. It’s something like: when the user once, go to this snap! After go to next snap.. and goes on…

Stop talking…

Let’s write a little bit and check this beautiful thing. But, first I’ll need to alert you that currently the support according Can I Use is not so good, so I recommend the Firefox.

Basically what we are going to do is: create a wrapper element that will hold the content and we set some properties like overflow, width e height. The magic happens here:

So, with that, we can create some stuffs like that:

See the Pen CSS Snap Points by Raphael Fabeni (@raphaelfabeni) on CodePen.

See the Pen CSS Snap Points by Raphael Fabeni (@raphaelfabeni) on CodePen.

Some references and links:

Do you like it? Did I write something stupid? Do you want to improve? Open an issue mentioning the post and let’s talk about it.

See all the posts