Have you tried CSS Snap Scrolling in Chrome 69?

Then do it now!

It’s okay Chrome if you wanna eat my RAM… GIF credits: GIPHY

The author of Switching sides, not tabs, who earlier used to love Firefox, has now changed its default browser back to Chrome. Yes, it’s me. And I’m no longer using Firefox…Well, this story is not about this topic as to why I changed back to Chrome, it’s because of a few great features in the latest Chrome 69. I read them, picked one and begin to do some more powerful web development stuff.

What will I make?

This:

No, I’m not just scrolling!

Not this:

Oh, damn! GIF credits: GIPHY

What’s a Scroll Snap❔

As stated in the Google Developers website:

CSS Scroll Snap allows web developers to create well-controlled scroll experiences by declaring scroll snapping positions.

That means, even if you try to scroll at your own desired position on a web-page implementing this, that section of the web-page will automatically snap to a particular section. In the demo given above you will observe that I’m trying to scroll down from on section to another (differentiated by the background colors), but as soon as I reach to a particular starting or ending of the section, the browser itself overrides my scroll location to whatever written in the web-page’s code.

This CSS specific feature can be used when you want to show paginated articles, a sticky header of a website which always stays in top or in image carousels. If you need to experience this, you need the latest Chrome browser (version 69). Time to update!

What will I need? 🛠️

• H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
• Your already wonderful HTML and CSS skills.
• A text editor (I’ll be using VS Code just because for my last tutorial on full-screen website pre-loader, I used it…I think VS Code is the one and only editor to love!)

Shall we Snap-Scroll?

Nothing quite big, just the basics. GIF credits: GIPHY

Our HTML code will be the smallest one amongst all of my tutorials on Codeburst. Add three (you can have more) <section> tags in which we’ll have a <h3> heading and a <p> paragraph tag. Done.

Let’s try CSS with superpowers this time. Make a new style.scss file which must include the following:

1. The body tag should have a scroll-snap-type property set to y mandatory. This will define the rule of how strictly the snap points are enforced in the browser. Other than mandatory, it can have none or proximity as its value. We’ll use mandatory, because, well we really need a strict rule so that the user is not able to scroll any further. The y before mandatory tells on which axis the scroll-snap will be performed.
2. Still inside the body, make overflow-y to scroll. It could also have been visible, hidden or auto, but we want to have the scrolling.
3. For the section, kindly add the scroll-snap-align property to start.

Believe it or not, we’re done.

That took just minutes, right? GIF credits: GIPHY

Here’s the complete CSS code:

Where to next? 🤔

This example was in vertical y-axis, what if you can change it to horizontal x-axis, like an image carousel? It’s really easy to do it and I know that you already got where to change what…!

You can read in-depth about the CSS Snap Scroll in the following links:

Well-Controlled Scrolling with CSS Scroll Snap | Web | Google Developers

CSS Scroll Snap Module Level 1

CSS Scroll Snap

Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.