CSS Scroll Snap on the Entire Viewport? We Made a React Package for It!

We see a lot of websites using JavaScript carousel libraries but none, specifically on touch devices, come close to that smooth inertial-based scrolling experience that comes with CSS scroll snap.

It seems to be a common design choice to have content on landing/home pages nicely partitioned into full-screen sections. These are just begging to have a nice vertical CSS scroll snap in place. Why leave it to chance that the user will scroll enough to see everything in context?

So we went to work and put together some full view snapping on our homepage. We allowed for some graceful degradation for mouse-based browsers; for touch devices it was silky smooth.

The implementation came with its fair share of challenges: some browsers insisted on the page being put in an overflow container and others were happy to have it flow more natively with the root window.

After some love and labour, we released an npm package that makes it easy to implement full view snapping on your website. Grab a copy of it here

The 20-year mark is fast approaching for when we first started using touch on the web. If we jump back to this time, we were looking at the least popular browsers/versions and allowing for some graceful degradation. Fast forward to today, perhaps the parallel is fast approaching between mouse and touch-based browsers?

Even if we explore this parallel, the CSS scroll snap is still functional for mouse-based browsers but the UX varies a lot between them and we just don't have much creative control compared to a JavaScript library.

We urge exploring all options with CSS scroll snapping first before resorting to a JavaScript library. The most restricting factor of CSS scroll snap is that you cannot influence the speed of the snapping. Some mouse based browsers will snap aggressively others fairly smooth (FireFox). If your brief doesn't require any X browser normalisation, CSS scroll snap is the way to go.

Here's an example of how we can influence the speed of the snapping with the CSS property. If you put together an animation, say with Lottie, you can influence the speed of animation which helps normalise the snapping speed across browsers.

However, this comes with its own restrictions. As soon as we start fixing elements there's a whole host of cross-browser testing and optimisations to consider.

Check it out, play around, fork improvements to our codebase.

I'd love to hear how you get on!