April 21, 2021

Carousel with scroll snap

Scroll snap is a relative new feature in CSS, that recenty got pretty decent support. It was ‘good for nothing’, if you believed these folks in 2016. But three years later Nolan Lawsons carousel with scroll snap was received much better.

But it was not Nolan, but the Google Scroll Survey that inspired me. The perfect use case for scroll snapping is a standard header carousel. I found Nolans work while doing research for building one. Nolan described three components: ‘scroll snap’, ‘smooth scroll’ and ‘pinch to zoom’. We do not need pinch to zoom and today we can achieve smooth scroll with a single line of CSS. Therefore I only needed to implement this one component: scroll snapping. Nolan was still worried about IE support, but we are not. Therefore I used anchor links instead of javascript for smooth scrolling, resulting in better performance and better degredation.

Interested in the result?

Check out my natively scrolling carousel with touch support on Codepen. It has got buttery smooth scrolling, degrades nicely and is just 3kb large.

Putting it in perspective

Great! But what does this mean in the bigger scheme of things? Modern technology allows us to build lighter websites, because HTML and CSS are getting more powerful. What once required 120kb, can now be achieved in under 3kb. We also have more bandwith available and faster computers. This combination leads to new possibilities. What was deemed impossible in 2008 and was just a fun commercial, is now actually within reach: loading a full website in 0.1 seconds. Although instantly loading websites have better reach, better conversion and a better user experience, this is not the direction in which web development is moving. On average, websites are getting bulkier, allowed by the increasing bandwidth. But, as expected, the variation is also getting larger. This means that you now have a choice.

You now have a choice

Do you want your next website to be slow and bulky, or… do you want it to a blazing fast and lightweight marvel of modern technology? The choice is yours. Interested? Contact me!

()  Joost van der Schee