Have you tried CSS Snap Scrolling in Chrome 69?
Then do it now!
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:

Not this:
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?
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:
- The
body
tag should have ascroll-snap-type
property set toy mandatory
. This will define the rule of how strictly the snap points are enforced in the browser. Other thanmandatory
, it can havenone
orproximity
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. They
beforemandatory
tells on which axis the scroll-snap will be performed. - Still inside the
body
, makeoverflow-y
toscroll
. It could also have beenvisible
,hidden
orauto
, but we want to have the scrolling. - For the section, kindly add the
scroll-snap-align
property tostart
.
Believe it or not, we’re done.
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:
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.