CSS Scroll Snap Points

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

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

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

CSS Scroll Snap

Basically, we can control the behavior of content inside a scroll container setting snaps in the 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 going to the next snap.. and goes on…

Stop talking…

Let’s write a little bit and check this beautiful thing. First, I’ll need to alert you that the support according to Can I Use is not so good, so I recommend 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:

More posts