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?
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.
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.