Welcome to Design Decoded, our original video series. In each video, we’ll trace the history of some popular UX design element and attempt to explain its ubiquity. In previous videos, we’ve taken a look at the caret and the hamburger menu. This time, we’re examining the scroll snap.
Riddle me this—what do this web page, and this app, and this site all have in common?
They snap.
Scroll snapping is a relatively new feature for controlling how an element moves across the screen. With just a little bit of code, designers can guarantee that users won’t accidentally miss anything as they scroll along. You’re probably wondering—what’s so special about web pages that snap? To answer that, let’s go back to the basics of scrolling.
Scrolling has been around since the first basic computers, but it wasn’t until long pages on the web became more common (let’s call it the mid-90s) that scrolling became second nature. What made this possible was the scroll bar.
Remember the scroll bar? It not only helped users move up and down a page, but it also showed them where they were. As with most elements of web design, scrolling changed when the iPhone hit the scene in 2007. Who needs a scroll bar when you can just use your finger?
One of the ways that the iPhone changed the scroll was by introducing the rubber band effect. It’s now a common feature of any touch screen. When you get to the bottom of any page, the screen bounces back into place, to let you know exactly where you are—the bottom.
Scroll snap creators felt like they had to alert users that they were at the bottom of a screen because if it stayed still, users would think it was broken. First created in Javascript, and now in CSS, the scroll snap gives designers more flexibility in how they display information. But what it’s really good at—kind of like the rubber band effect—is helping to avoid false floors. Thanks to the scroll snap, you won’t get stuck thinking that you’re at the end of the page or carousel when you’re actually not.
So next time you catch yourself looking at your screen, remember that good design isn’t always about the destination. Sometimes, it’s about the journey.
