codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Follow publication

Have you tried CSS Snap Scrolling in Chrome 69?

Vaibhav Khulbe
codeburst
Published in
4 min readSep 13, 2018

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? 🛠️

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:

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.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Bursts of code to power through your day. Web Development articles, tutorials, and news.

✦ Independent web developer/designer/blogger ✦ Framer Developer at Moving Rectangles ✦ Framer Expert & Partner | Advocate at 10x Designers

No responses yet

Write a response